角度过滤器 |添加此过滤器时，filter{datatype:object.properties} 没有看到任何数据

Question

我习惯于编写自定义过滤器，现在我一直在用下拉菜单中的 ng-options 我在选择中切换到 ng-repeat

似乎当我在下面添加这样的过滤器时，我不再获取数据

<select id="Utility" name="Utility" class="form-control" required>
    <option ng-repeat="utility in detail.utilityList | filter:{type:detail.utilityList}"  ng-value="utility.name">{{utility.name}}</option>
</select>

detail.UtilityList 有一个type 所以我很困惑

  $scope.detail.utilityList = [{
     "name": "Commonwealth Edison Co",
     "type": "Electric",
     "$$hashKey": "object:140"
  }, {
     "name": "Nicor Gas",
     "type": "Gas"
  }, {
     "name": "Peoples Energy",
     "type": "Gas"
  }];

这是一个展示一切的小提琴

https://jsfiddle.net/e8o3ef35/

1. 我什至需要使用ng-model 吗？目的是什么？
2. ng-options 真的是更好的选择吗？
3. 我需要使用$scope 的原因是因为我没有使用controller as 语法吗？
4. 我确实想使用带有过滤器的detail.utilityType 也不起作用

这是另一个

 $scope.detail.utilityType = [
 {
    "type": "Gas"
 }, 
 {
    "type": "Electric"
 }];

Answer 1

实际上，正如您在 cmets 中所说的，您只想为 UtilityType 显示第一个下拉列表，然后根据所选的 Utility Type，您希望根据所选类型显示另一个具有 Utilitylist 值的下拉列表。

代码如下：

<div ng-controller="MyCtrl">
<div class="container-fluid">
    <form>
    <div >
        Select Utility Type
        </div>
        <select id="type" name="Type" class="form-control" required ng-model="selectedType">
            <option ng-repeat="type in detail.utilityType " ng-value="type.type">{{type.type}}</option>
        </select>
        <div ng-if="selectedType">
        Selected Type is : {{selectedType}}
        </div>
        <br>
        <div ng-if="selectedType">
        Select Utility List
        </div>
        <select id="list" name="List" class="form-control" required ng-if="selectedType" ng-model="selectedutility">
            <option ng-repeat="utility in detail.utilityList| filter:{type:selectedType}" ng-value="utility.name">{{utility.name}}</option>
        </select>

    </form>
</div>

您需要先从第一个下拉列表中选择所选类型，然后根据所选类型在第二个下拉列表中应用过滤器。