простой множественный выбор ng-selected с массивом не работает
Это мой список категорий
$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"}]
У меня есть эти два массива первый массив categories содержит все категории.
и второй массив содержит категорию, которую имеет этот продукт.
Я выбрал тег, в котором перечислены все категории на момент добавления продукта. Пользователь может выбрать несколько продуктов.
{{}} Category.category_name
Теперь предположим, что я добавил один продукт с 3 категориями 3,4,5 соответственно.
Когда я пытаюсь отредактировать этот продукт, необходимо выбрать категорию 3,4,5, поскольку этот продукт связан с этой категорией. Так что это мой код, который не работает.
<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>
Я запутался здесь, как сделать множественный выбор, когда у меня есть массив с массивом. Категории 3,4,5 должны быть выбраны среди category.if идентификатор делать
ng-selected="{{category.category_id ==5}}" вот так выбирается только 5 категория. как сделать множественный выбор с массивом или несколькими значениями?
Решение
У меня есть решение, используйте $ 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());
});
});
И применить выбранные значения с помощью следующего:
<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>
==> Полный код на Plunker мульти выбор ng-selected
Надеюсь, поможет!
Другие решения
Вы забыли написать ng-app = «» в своем коде …
что-то вроде этого !
<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>я добавил
$ смотреть на множественный выбор.
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() );
});
});
});
});
и я сделал некоторые изменения в моей части зрения
<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>
Я положил все категории в selectedValues и назначен select пометить как ng model с множественным выбором. После этого изменения это работает для меня.