Question

我的范围内有这些项目：

$scope.states = [ 
    { StateAbbr: 'CA', StateName: 'California' },  
    { StateAbbr: 'MI', StateName: 'Michigan' }  ];

$scope.counties = [  
    { CountyName: 'ALCONA', StateAbbr: 'MI'  },  
    { CountyName: 'BENZIE', StateAbbr: 'MI' },  
    { CountyName: 'CHIPPEWA', StateAbbr: 'MI' },  
    { CountyName: 'IONIA', StateAbbr: 'MI' },
    { CountyName: 'KEWEENAW', StateAbbr: 'MI' },  
    { CountyName: 'Los Angeles', StateAbbr: 'CA' },  
    { CountyName: 'MACKINAC', StateAbbr: 'MI' },  
    { CountyName: 'Orange', StateAbbr: 'CA' },  
    { CountyName: 'Riverside', StateAbbr: 'CA' },  
    { CountyName: 'San Bernardino', StateAbbr: 'CA' },  
    { CountyName: 'San Diego', StateAbbr: 'CA' },  
    { CountyName: 'SCHOOLCRAFT', StateAbbr: 'MI' },  
    { CountyName: 'Ventura', StateAbbr: 'CA' }  ];

$scope.filterDefaults = function() {
    $scope.orderFilter = {};
    $scope.orderFilter.selectedState = '';
    $scope.orderFilter.selectedCounty = '';
};
$scope.filterDefaults();

标记：

<label>State</label>
<select data-ui-select2="select2Options" name="stateName" data-ng-model="orderFilter.selectedState" data-placeholder="Choose a state…">
    <option value=""></option>
    <option data-ng-repeat="s in states" value="{{s.StateAbbr}}">{{s.StateName}}</option>
</select>

<label>County</label>
<select data-ui-select2="select2Options" name="countyName" data-ng-model="orderFilter.selectedCounty" data-placeholder="Choose a county…" data-ng-disabled="orderFilter.selectedState == '' " >
    <option value=""></option>
    <option data-ng-repeat="c in counties | filter:orderFilter.selectedState" value="{{c.CountyName}}">{{c.CountyName}}</option>
</select>

如何正确设置过滤器以便状态过滤县？

谢谢你，斯蒂芬

Answer 1

在State下拉列表的ng-model上，您可以使用selectedState而不是orderFilter.selectedState。

以下是它的外观。

<div class="span2">
    <label>State</label>
    <select data-ui-select2="select2Options" data-ng-model="selectedState" data-ng-    options="s.StateName for s in states" data-placeholder="Choose a state…">
        <option value=""></option>
    </select>
</div>
<div class="span2">
    <label>County</label>
    <select data-ui-select2="select2Options" data-ng-model="orderFilter.selectedCounty" data-ng-options="c.CountyName for c in counties | filter:selectedState.StateAbbr" data-placeholder="Choose a county…">
        <option value=""></option>
    </select>
</div>

这是工作的jsFiddle。 http://jsfiddle.net/vikasgoyalgzs/mNL3h/

请确保单击按钮以更新包含数据的下拉列表。

希望这有帮助。

Answer 2

问题是filter：selectedState.StateAbbr是错误的对象，它应该是filter： orderFilter .selectedState（可能是StateAbbr）

一旦做出改变，那么它就像一个冠军

如何根据另一个中的选定值过滤一个ui.select2

2 个答案: