Angular ng-option自定義過濾器多個下拉列表

Question

我有一個項目，要求我構建帶有多個下拉過濾器的角度菜單。 當最終用戶選擇一個過濾器時，其他兩個過濾器也會相應更新。 我已經學會了不使用ng-repeat和options的艱難方法，現在我一生都無法弄清楚如何在視圖中獲取我的選擇字段，以反映視圖中事件將導致的更改。

這是我的html：

    <div class="large-8 columns" ng-controller="democontroller"  >
      <label> Demographic
        <select ng-options = "x.demo as x.demo for x in groups | filteredDemo" ng-model = "demoValue">
          <option value="">Please Select A Group</option>
        </select>
      </label>
      <label> Location
        <select  ng-model = "locationValue" ng-options = "x.location as x.location for x in groups ">
          <option value="">Please Select A Location</option>
        </select>
      </label>
       <label> Days
         <select  ng-model = "dayValue" ng-options = "x.days as x.days for x in groups " >
           <option value="">Please Select A Meeting Day</option>
         </select>
      </label>
    </div>
    <div class="large-8 columns">
      <p>
      </p>
    </div>
</div>

這是我當前的javascript：

var app=angular.module('selectapp',[]);


app.controller('democontroller',['$scope','$http',function($scope,$http){
    $http.get("jsoninfo.php").success(function(response){$scope.groups=response;});

$scope.currentValues = ['1','0','0'];

app.filter('filteredDemo', function(){

return function(e){
    if(e == 1){
        return e;
    }
}

});

}]);

任何幫助將不勝感激。

Answer 1

我會嘗試用兩個級別（ 組和位置 ）來解釋HOWTO。 在那之后添加級別應該是顯而易見的。

• 第一個選擇列表的ng-model值將保存selectedGroup
• 第二個選擇列表的ng-model值將保存selectedLocation

在ng-options ，我們必須選擇完整的對象，但僅顯示名稱。 因此，我們將ng-options="group as group.name for group in groups" 。 我們選擇完整的對象，因為在從屬下拉列表中，我們將迭代嵌套的集合，這里為selectedGroup.locations

    <label>Demographic
        <select ng-model="selectedGroup" ng-options="group as group.name for group in groups">
            <option value="">Please Select A Group</option>
        </select>
    </label>
    <label>Location
        <select ng-model="selectedLocation" ng-options="location as location.name for location in selectedGroup.locations">
            <option value="">Please Select A Location</option>
        </select>
    </label>

這是我用虛擬數據制作的演示小提琴 。