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的对象。但是，如果已经选择了该值，则在给出的工作示例中下方的{name: 'Rate 2', id: 2, valid: false}处于选中状态，但具有valid: false，在这种情况下，需要显示所选的值（意味着Rate 2仅需要处于选中状态）。除非用户触摸选择框，否则如果他单击选择框，则仅需要显示有效费率，并且他可以选择任何有效费率。

如果他取消选中showvalidrates（否），则所有费率都需要显示在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值，需要实现此方案。（即使有效为false除非用户更改，否则将其选中）。

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

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

Answer 1

要获得预期的结果，请使用以下使用带有复选框条件的过滤器的选项

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

在检查时，showvalidrates为true并基于将过滤器设置为{valid：true}以显示带有标志有效-true的选项
取消选中时，showvalidrates为false并基于将过滤器设置为{}
添加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>

过滤angularjs中的选择选项

1 个答案: