php - simple multiple selection ng-selected with array not working

Question

This is my category list

$scope.categories=  [{"category_id":"1","category_name":"sports"},{"category_id":"2","category_name":"casual"},{"category_id"
    :"3","category_name":"formal"},{"category_id":"4","category_name":"party wear"},{"category_id":"5","category_name"
    :"winter"},{"category_id":"9","category_name":"summer"}]

The product can have multiple categories.

$scope.product_categories=[{"category_id":"3"},{"category_id":"4"},{"category_id":"5"}] 

I have these two array first array categories holds all the category. and second array holds the category which that product has. I have select tag where all the categories are listed at the time of adding the product.user can select multiple product.

{{category.category_name}}

Now suppose I have added one product with 3 category 3,4,5 respectively.

When I trying to edit that product these 3,4,5 category must be selected because this product is related with these category. So this is my code which is not working.

<select multiple="" class="form-control" name="category_list[]"  ng-model="categories"  >                
 <option ng-selected="{{category.category_id == product_categories}}"
    ng-repeat="category in categories"
    value="{{category.category_id}}">
    {{category.category_name}}
 </option>

I am confused here how to do the multiple selection when I have array with array.Categories 3,4,5 must be selected among the category.if id do ng-selected="{{category.category_id ==5}}" like this only 5 category is get selected.how to do the multiple selection with array or multiple values?

Answer 1

I have a solution, use $scope.$watch

 $scope.$watch('product_categories', function (nowSelected) {
        $scope.selectedValues = [];

        if (!nowSelected) {
            // here we've initialized selected already
            // but sometimes that's not the case
            // then we get null or undefined
            return;
        }
        angular.forEach(nowSelected, function (val) {
            $scope.selectedValues.push(val.category_id.toString());
        });
    });

And apply selectedValues via following:

<select multiple ng-model="selectedValues" style="width: 50%;" size="7">
        <option ng-repeat="category in categories" value="{{category.category_id}}" ng-selected="{{selectedValues.indexOf(category.category_id.toString())!=-1}}">{{category.category_name}}</option>
    </select>

==> Full code at Plunker multi selection ng-selected

Hope it helps!

Answer 2

you forgot to write the ng-app="" in your code ... something like this !

<div ng-app="">
<select multiple="" class="form-control" name="category_list[]"  ng-model="categories"  >                
 <option ng-selected="{{category.category_id == product_categories}}"
    ng-repeat="category in categories"
    value="{{category.category_id}}">
    {{category.category_name}}
 </option>
  </div>

Answer 3

I have added $watch for the multiple selection.

angular.module("myApp.controllers",[])
        .controller("product",function($scope){
    $scope.categories=  [{"category_id":"1","category_name":"sports"},{"category_id":"2","category_name":"casual"},{"category_id"
        :"3","category_name":"formal"},{"category_id":"4","category_name":"party wear"},{"category_id":"5","category_name"
        :"winter"},{"category_id":"9","category_name":"summer"}]

    $scope.product_categories=[{"category_id":"3"},{"category_id":"4"},{"category_id":"5"}] 

$scope.$watch('product_categories', function(nowSelected){

        $scope.selectedValues = [];

        if( ! nowSelected ){

            return;
        }
        angular.forEach(nowSelected, function(val){
            $scope.selectedValues.push( val.category_id.toString() );
        });
    });
        }); 

        });

and I made some changes in my view part

<select  class="form-control" name="category_list[]"  multiple ng-model="selectedValues"  >                
       <option ng-repeat="category in categories"
            value="{{category.category_id}}">
             {{category.category_name}}
        </option>
</select>

I put all the categories in selectedValues and assigned to select tag as ng model with multiple selection. After this change It works for me.