Question

这是我的类别列表

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

该产品可以有多个类别。

categories

我有这两个数组第一个数组<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类3,4,5。

当我尝试编辑该产品时，必须选择这些3,4,5类别，因为此产品与这些类别相关。所以这是我的代码无效。

ng-selected="{{category.category_id ==5}}"

我在这里很困惑如何在有数组的数组时进行多项选择。必须在category.if id中选择3,4,5类。 {{1}}这样只有5个类别被选中。如何使用数组或多个值进行多项选择？

Answer 1

我有一个解决方案，使用$ 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());
        });
    });

并通过以下方式应用selectedValues：

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

==＆GT; Plunker的完整代码 multi selection ng-selected

希望它有所帮助！

Answer 2

你忘了写ng-app =＆＃34;＆＃34;在你的代码中...... 像这样的东西！

＆＃13;

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

＆＃13;

Answer 3

我补充说 $注意多项选择。

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，并进行多项选择。在这个改变之后它适用于我。

简单的多重选择ng-selected与数组不工作

3 个答案: