phparraysangularjsangularjs-select

simple multiple selection ng-selected with array not working


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?


Solution

  • 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.