javascript - Angular ng-option自定义过滤器多个下拉菜单

Question

我有一个项目要求我构建一个带有多个下拉过滤器的 Angular 菜单。当最终用户选择一个过滤器时，其他两个过滤器也会相应更新。我已经学会了不将 ng-repeat 与选项一起使用的艰难方法，现在我无法弄清楚如何让 View 中的选择字段反射(reflect) View 中的事件将引起的更改。

这是我的 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

我将尝试用两个级别(组和位置)解释操作方法。之后添加级别应该是显而易见的。

• 第一个选择列表的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>

这是一个 demo fiddle 我用虚拟数据制作的。