過濾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>