Фильтр выбора параметров в angularjs - PullRequest
Новая
       18

Фильтр выбора параметров в angularjs

0 голосов
/ 20 июня 2019

В моем приложении 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 (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 и в этом сценарии, поэтому, пожалуйста, помогите мне, как справиться с этой ситуацией ..

Если есть какой-либо альтернативный подход к нему, он также приветствуется, но требования такие же, как указано выше.

1 Ответ

2 голосов
/ 20 июня 2019

Для достижения ожидаемого результата используйте нижеприведенную опцию использования фильтра с условием флажка

ng-options = "option.id как option.name для опции в данных | 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>
...