按属性的属性过滤ngOptions

时间:2014-10-31 04:45:17

标签: javascript angularjs

我有这段代码:

//sample of data.

var combobox = new[] { 

                new { Key = 1, Value = "a[del]", isDelegate = true }, 
                new { Key = 2, Value = "b[del]", isDelegate = true }, 
                new { Key = 3, Value = "c", isDelegate = false },
                new { Key = 4, Value = "d", isDelegate = false },
                new { Key = 5, Value = "e[del]", isDelegate = true }

            };

<select ng-model="selectedFilter" id="selectedFilter"
              ng-options="item.Key as item.Value for item in ComboBox 
               track by item.Key" ng-change="loadData()">
    <option>--</option>
</select>

我正在尝试为这样的结果添加ng-if选项:

<select ng-model="selectedFilter" id="selectedFilter"
       ng-options="item.Key as item.Value for item in ComboBox track by item.Key" ng-change="loadData()">
    <option value="item.Key" ng-if="item.isDelegate">{{item.Value}}</option>
</select>

3 个答案:

答案 0 :(得分:1)

您可以使用过滤器

&#13;
&#13;
var app = angular.module('my-app', [], function() {

})

app.controller('AppController', function($scope) {
  $scope.condition = {
    isDelegate: true
  }

  $scope.combobox = [{
    Key: 1,
    Value: "a[del]",
    isDelegate: true
  }, {
    Key: 2,
    Value: "b[del]",
    isDelegate: true
  }, {
    Key: 3,
    Value: "c",
    isDelegate: false
  }, {
    Key: 4,
    Value: "d",
    isDelegate: false
  }, {
    Key: 5,
    Value: "e[del]",
    isDelegate: true
  }];
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  <select ng-model="selectedFilter" id="selectedFilter" ng-options="item.Key as item.Value for item in combobox | filter:condition track by item.Key" ng-change="loadData()">
    <option value="item.Key" ng-if="item.isDelegate">{{item.Value}}</option>
  </select>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我使用ng-repeat完成了这项工作。

 <select ng-model="val2" id="selectedFilter"
                   >
                <option value="item.Key"  ng-repeat="item in combobox" ng-  
  if="item.isDelegate">{{item.Value}}</option>
            </select>

检查Sample code

答案 2 :(得分:0)

如果您不希望使用isDelegate!= true显示选项,则过滤是一种选择。

ng-options="item.Key as item.Value for item in ComboBox track by item.Key | filter: {isDelegate: true}"

但是如果你想在选择列表中将该选项显示为已禁用,以便用户无法选择它,请使用此

<select ng-model="selectedFilter" id="selectedFilter" ng-change="loadData()">
  <option ng-repeat="item in ComboBox" value="{{item.Key}}" ng-disabled="!item.isDelegate">{{item.Value}}</option>
</select>