Question

我一直在尝试根据单选按钮选择过滤下拉列表中显示的选项列表。

<div>
    <div ng-controller="sampleCtrl">
        <label>
            <input type="radio" name="type" ng-value="1" ng-model="selectedType" />A</label>
        <label>
            <input type="radio" name="type" ng-value="2" ng-model="selectedType" />B</label>
        <select ng-model="selectedOption" ng-options="option.id as option.name for option in options | filter:{type:selectedType}">
            <option value="">&lt;Select&gt;</option>
        </select>
        <hr/>
        <div>Type: {{selectedType}}</div>
        <div>Option: {{selectedOption}}</div>
    </div>
</div>

function sampleCtrl($scope) {

    $scope.selectedType = 1;

    $scope.selectedOption = 0;

    $scope.options = [{
        id: 1,
        name: 'bread',
        type: 1
    }, {
        id: 2,
        name: 'sugar',
        type: 2
    }, {
        id: 3,
        name: 'tea',
        type: 1
    }, {
        id: 4,
        name: 'coffee',
        type: 2
    }, {
        id: 5,
        name: 'butter',
        type: 2
    }];
}

这是jsFiddle

我有一个默认的''选项，每次用户更改类型时都应该显示该选项。现在它根据类型过滤我的选项。但是，当过滤器更改为时，它不会更改我的模型。

请帮忙。

感谢。

Answer 1

我认为这就是您所需要的：Fiddle

基本上，当用户通过在单选按钮之间切换来更改类型时，将触发watch将重置所选选项。

因此，在更改类型时，它可确保重置与所选选项关联的模型。

$scope.$watch('selectedType', function (newValue, oldValue) {
    if (newValue !== oldValue) {
        $scope.selectedOption = null;
    }
});

Answer 2

简化@ callmekatootie的回答：

在此实例中，您不需要参数newValue和oldValue：

$scope.$watch('selectedType', function() {
    $scope.selectedOption = 0;
});

我也从$scope.selectedOption = null更改回init值，因为在onload期间会触发$watch。这可以防止以后出现其他问题。

Fiddle

过滤选择列表时更新默认选择选项

2 个答案: