Question

我有一个项目要求我构建一个带有多个下拉过滤器的角度菜单。当最终用户选择一个过滤器时，另外两个过滤器相应地更新。我已经学会了不使用ng-repeat和选项的困难方法，现在我的生活中无法弄清楚如何在视图中获取我的选择字段以反映将由视图中的事件引起的更改。

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

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

Angular ng-option自定义过滤多个下拉列表

1 个答案: