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

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.