Как отфильтровать значения <select>в angularjs? - PullRequest
Новая
       36

Как отфильтровать значения <select>в angularjs?

0 голосов
/ 12 апреля 2019

Я хочу отфильтровать значения <select>.

У меня есть таблица с первым столбцом <select>.

Например: объект для <select> JSON: 

json1 = [{id: 1, name: 'ABC'}, {id: 2, name: 'DEF'}, {id: 3, name: 'XYZ'}, {id: 4, name: 'ASD'}, {id: 5, name: 'QWE'}]

json2 = [{id: 1, name: 'ABC'}, {id: 2, name: 'DEF'}]

Мое требование: нам нужно показать значения из json1 в параметрах ng, но какой объект не должен присутствовать в json2.

Например: первые 2 строки будут заполнены json2. Поэтому нам нужно указать опции 'XYZ', 'ASD' и 'QWE' в следующих строках.

Предположим, если в раскрывающемся списке третьей строки выбрано имя ' XYZ '. затем 4-й ряд <select> должен показывать только 'ASD', and 'QWE'. Точно так же любой объект, выбранный в других строках, не должен отображаться в раскрывающемся списке других строк.

Я пробовал что-то вроде этого 

 <select ng-model="obj"
         ng-options="obj.id as obj.name for obj in json1 | myFilter:json2">
</select>

myApp.filter('myFilter', function(json2) {
return function(json1) {
  var filtered = []; 

  json1.forEach((d) => {
   var exists = false;
      json2.forEach((ad) => {
         if(ad.id == d.id) {
           exists = true;
         }
      });
    if(!exists) filtered.push(d);
  });
  console.log(filetered); 
  return filtered.length > 0 ? filtered : json1;
};
});

В фильтре console.log () значения фильтруются правильно, как и ожидалось. Однако в параметрах ng все параметры из json1 по-прежнему доступны без обновления отфильтрованных значений.

Что не так?

Ответы [ 2 ]

0 голосов
/ 13 апреля 2019

Это то, что вы ищете?

Например: 

<table>
<thead>
    <tr>
        <th>Unique</th>
        <th>Name</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="product in products">
        <td>
            <select ng-model="product.unique" ng-options="obj.id as obj.name for obj in (json1 | myfilter:products:$index)">
                <option value="">No select</option>
            </select>
        </td>
        <td ng-bind="product.name"></td>
    </tr>
</tbody>
</table>

vm.products = [{name: 'Product 1'}, {name: 'Product 2'}, {name: 'Product 3'}, {name: 'Product 4'}, {name: 'Product 5'}];
vm.json1 = [{id: 1, name: 'ABC'}, {id: 2, name: 'DEF'}, {id: 3, name: 'XYZ'}, {id: 4, name: 'ASD'}, {id: 5, name: 'QWE'}];

App.filter('myfilter' , [function() {
    return function(json1, products, index) {
        // Filter all products, except the mime
        productsFilter = products.filter(function(product, i) {
                return i !== index;
        });

        // filter those that have not yet been selected
        var json1Filter = json1.filter(function(item) {

            // ask if there is the id in a product
            return !productsFilter.some(function(product) {
                return item.id == product.unique;
            });
        });
        return json1Filter;
    };
}]);

Пример Codepen: https://codepen.io/anon/pen/vMJyLz

0 голосов
/ 12 апреля 2019

Я думаю, что у вас немного неправильные параметры вашего фильтра. Функция фильтра принимает первый параметр в качестве значения, подлежащего фильтрации, а остальные параметры - те, что после myFilter:.

Я не уверен на 100%, что вы хотите здесь сделать, но ваша функция фильтра вызывается для каждого значения в раскрывающемся списке и должна возвращать замену для данного значения.

Однако ваш код возвращает массив элементов. Это не то, как фильтр работает в AngularJS.

Ваш фильтр должен быть обновлен, чтобы проверить, должен ли элемент, передаваемый в фильтр, отображаться или нет, и если нет, вернуть false.

Вы можете посмотреть на пример сценария из документации AngularJS , чтобы увидеть, как они показывают это, или этот другой вопрос / ответ переполнения стека .

...