過濾ngOptions通過屬性的屬性

Question

我有這樣的代碼：

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

Answer 1

您可以使用過濾器

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 
 
    }]; 
 
})

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

Answer 2

我已經完成了這個使用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

Answer 3

Filter是，如果你不希望顯示與isDelegate！=真選項一個選項。

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>