如何在angularjs中过滤<select>的值？

Question

我想过滤 <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'}]

我的要求是：我们需要在 ng-options 中显示来自 json1 的值，但在 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-options 中，来自 json1 的所有选项仍然可用，未使用过滤值更新。

怎么了？

Answer 1

这是你要找的吗？

例如：

<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;
    };
}]);

示例代码笔：https://codepen.io/anon/pen/vMJyLz

Answer 2

我认为您的过滤器参数略有错误。过滤函数将第一个参数作为要过滤的值，其他参数为myFilter:之后的参数。

我不能 100% 确定你想在这里发生什么，但你的过滤器函数会为下拉列表中的每个值调用，并且应该返回给定值的替换值。

但是，您的代码会返回一个项目数组。这不是 AngularJS 中过滤器的工作方式。

您的过滤器需要更新以检查是否应显示传入过滤器的项目，如果不显示，则返回false。

您可以查看script example from the AngularJS docs 以了解他们如何执行此操作，或查看其他Stack Overflow question/answer。