AngularJS ng-options用于排除特定对象

时间:2014-10-06 11:28:54

标签: angularjs ng-options

我正在使用角度ng选项来显示多个选项作为当前类别的父类别的选项,基本上这些选项包含所有现有类别,我需要从ng-options中排除当前类别,这很有意义,因为一个类别不能成为其自身的父类别。那我该怎么做?目前我有以下代码:

<tr ng-repeat="category in allCategories">
    <th ng-bind="category.name"></th>
    <th>
        <select ng-options="everyCategory.name for everyCategory in allCategories">
            <option value="">Select parent category</option>
        </select>
    </th>
</tr>

4 个答案:

答案 0 :(得分:27)

你应该使用过滤器。

<select ng-options="everyCategory.name for everyCategory in allCategories | filter: { name: '!' + category.name }">...</select>

答案 1 :(得分:2)

您可以使用过滤器

<tr ng-repeat="category in allCategories">
  <th>{{category.name}}</th>
  <th>
    <select ng-options="everyCategory.name for everyCategory in allCategories | filter: {name: '!' + category.name}" ng-model="somthing">
      <option value="">Select parent category</option>
    </select>
  </th>
</tr>

我创造了一个如何使用它的小小提琴:http://jsfiddle.net/krausekjaer/tnqrqk2w/3/

答案 2 :(得分:0)

感谢@Krause和@Kamil R的答案,但我在使用他们的解决方案时发现了一个问题,正如我之前的评论中提到的那样,如果有两个类别,其中一个名称作为另一个名称的子字符串,过滤器将跨越它们。例如,类别如下: 糖果 直板 使用

filter: { name: '!' + category.name }

会将它们都过滤掉,为了确保只过滤掉一个,我最后编写了一个自定义过滤器:

app.filter('parentTaxonomyFilter', function(){
    return function(items, name){
        var arrayToReturn = [];        
        for (var i = 0; i < items.length; i ++){
            if (items[i].name != name) {
                arrayToReturn.push(items[i]);
            }
        }
        return arrayToReturn;
    };
});

在html中,我使用这样的过滤器:

<select class="form-control" ng-init="taxonomy.parentTaxonomy=getParentTaxonomy(taxonomy)" ng-model="taxonomy.parentTaxonomy" ng-options="everyTaxonomy.name for everyTaxonomy in data.allTaxonomies|parentTaxonomyFilter:taxonomy.name">
    <option value="">select parent taxonomy</option>
</select>

答案 3 :(得分:0)

试试这个

<tr ng-repeat="category in allCategories">
  <th>{{category.name}}</th>
  <th>
    <select ng-options="everyCategory.name for everyCategory in allCategories | filter: { name: '!' + category.name }" ng-model="somthing">...</select>
      <option value="">Select parent category</option>
    </select>
  </th>
</tr>