Как отфильтровать ng-опции на AngularJS select? - PullRequest
Новая
       25

Как отфильтровать ng-опции на AngularJS select?

0 голосов
/ 07 декабря 2018

У меня есть что-то вроде этого, 

<select ng-model="person"
        ng-options="person.name for person in mv.people">

Теперь в массиве людей есть некоторые члены, которые я хочу скрыть.пример: 

{
   name: 'john',
   hide: true
}

Как сделать так, чтобы эти люди не отображались как опция?

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

Вы можете применить filter так же, как если бы вы использовали ng-repeat. 

angular.module('app', [])
  .controller('ctrl', ($scope) => {
    $scope.persons = [{
      name: 'John',
      hide: true
    }, {
      name: 'Jane',
      hide: false
    }, {
      name: 'Jeff',
      hide: false
    }, {
      name: 'Jim',
      hide: true
    }];
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select ng-model="selectedPerson" 
          ng-options="person as person.name for person in persons | filter:{hide: false}">
  </select>
</div>
0 голосов
/ 07 декабря 2018

Самый простой способ - использовать предложение filter следующим образом: ng-options="person.name for person in people | filter:{hide:'false'}".В будущем вы также можете создать собственный фильтр для вашего массива и применить его в предложении ng-options.Ниже у вас есть рабочий пример.

Приветствия! 

var app = angular.module("myApp", []);

angular.module("myApp").controller("myController", function($scope) {
    $scope.people = [{
       "name": "john 1",
       "hide": false
    }, {
       "name": "john hidden",
       "hide": true
    }, {
       "name": "john 2",
       "hide": false
    }]
});

angular.module("myApp").filter('hidden', [function() {
    return function (object) {
        var array = [];
        angular.forEach(object, function (person) {
            if (!person.hide)
                array.push(person);
        });
        return array;
    };
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="person2" ng-options="person.name for person in people | filter:{hide: false}"></select>
<select ng-model="person2" ng-options="person.name for person in people | hidden"></select>
</div>
...