在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 为真，那么只有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

点击选择框只需要显示Rate 1和Rate 3，用户可以选择这两个中的任何一个。

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

valid属性是代码中新实现的用于过滤数据的属性，所以为了影响应用中早先的selectRate值，需要实现这个场景。（即使valid为false也行除非用户更改，否则选择）..

我对 AngularJs 和这种情况非常陌生，所以请帮助我如何处理这种情况..

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

Answer 1

为了达到预期的效果，请使用下面的使用带有复选框条件的过滤器的选项

ng-options="option.id as option.name for option in data|filter: !init && showvalidrates?{valid:true}:{}" ng-init="init = true">

1. 在检查时，showvalidrates 为 true，并基于设置为 { valid: true } 的过滤器来显示带有标记 valid -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>