过滤angularjs中的选择选项

Question

在我的Angularjs应用程序中，我的代码如下，

HTML：

<div ng-app="test" ng-controller="test">
    <div>
    <input type="checkbox" ng-model="showvalidrates"> Display only Valid Rates
    <br><br>
        <select ng-model="selectRate" 
        ng-options="option.id as option.name for option in data">
        </select>
    </div>
</div>

JS：

angular.module('test', [])
    .controller('test', ['$scope', function ($scope) {
        $scope.data = [
      {name: 'Rate 1', id: 1, valid: true}, 
      {name: 'Rate 2', id: 2, valid: false},
      {name: 'Rate 3', id: 3, valid: true}
      ];
      $scope.selectRate = $scope.data[1].id;
      $scope.showvalidrates = true;
}]);

在这里，我正在使用ng-options显示利率，并且我有一个复选框，默认情况下它将处于选中状态。

在这种情况下，我需要过滤ng-options以仅显示有效的汇率，而我所拥有的有效汇率是valid: true或valid: false 。

如果选中此复选框，则表示showvalidrates为true，则仅需要在选项中显示valid: true的对象valid: true 。但是，如果已经选择了该值，则在{name: 'Rate 2', id: 2, valid: false} ，但是它具有valid: false在这种情况下，需要显示选定的值（平均Rate 2仅需要处于选定状态）。 除非用户触摸选择框，否则如果他单击选择框，则仅需要显示有效费率，并且他可以选择任何有效费率。

如果他取消选中showvalidrates （false），则所有速率都需要显示在ng-options 。

JsFiddle： http : //jsfiddle.net/opygzs4a/

根据给出的示例，

showvalidrates = true

Options: 

Rate 1

Rate 2 (Selected)

Rate 3

在选择框上单击，仅需要显示“速率1”和“速率3”，用户可以选择这两个。

除非选择了这两个中的任何一个，否则单独的Rate 2需要处于选择状态，并且selectRate的值应仅为2。

valid属性是在代码中新实现的用于过滤数据的数据，因此，为了影响应用程序中较早的selectRate值，需要实现此方案。（即使valid为false，除非用户更改，否则请选择它）。

我是AngularJs和这种情况的新手，所以请帮助我如何处理这种情况。

如果有其他替代方法，也将受到欢迎，但要求与上述相同。

Answer 1

为了获得预期的结果，请在复选框条件下使用以下使用过滤器的选项

ng-options =“ option.id as option.name for data | filter中的选项：！init && showvalidrates？{valid：true}：{}” ng-init =“ init = true”>

1. 选中时，showvalidrates为true，并基于将过滤器设置为{valid：true}以显示带有有效标志-true的选项
2. 取消选中时，showvalidrates为false且基于该设置的过滤条件为{}
3. 添加ng-init标志以控制初始默认值

Codepen- https: //codepen.io/nagasai/pen/GbrOMm ? editors = 1010

工作代码示例

 angular.module('test', []) .controller('test', ['$scope', function ($scope) { $scope.data = [ {name: 'Rate 1', id: 1, valid: true}, {name: 'Rate 2', id: 2, valid: false}, {name: 'Rate 3', id: 3, valid: true} ]; $scope.selectRate = $scope.data[1].id; $scope.showvalidrates = true; }]); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="test" ng-controller="test"> <div> <input type="checkbox" ng-model="showvalidrates" ng-change="init = false"> Display only Valid Rates <br><br> <select ng-model="selectRate" ng-options="option.id as option.name for option in data|filter: !init && showvalidrates?{valid:true}:{}" ng-init="init = true" ng-click="init = false"> </select> </div> </div>