javascript - 在angularjs中动态设置过滤器

我想根据下拉列表中选择的条件过滤表格。在newList函数中写入val不会过滤表。任何建议如何解决这个问题。


的HTML

<tbody>

  <tr ng-repeat="friendObj in newfriends">

    <td>{{friendObj.name}}</td>

    <td>{{friendObj.phone}}</td>

    <td>{{friendObj.age}}</td>
  </tr>

</tbody>

JS

 $scope.newList = function (val) {
      alert(val);
$scope.newfriends = $filter('filter')($scope.friends, {
    val: $scope.searcha
})

最佳答案

根据您的代码，您尝试多次添加条件，然后使用这些条件进行过滤。

在您的JSON中，这里只有3个属性。 {姓名，电话和年龄}。

因此，您的条件不应超过3行，并且两次不应包含相同的内容。
如果这样做，则需要构建自己的过滤器。
使用以下代码

$scope.newList = function() {
  var searchBy = {};
  angular.forEach($scope.newCriteria, function(criteria, key) {
    searchBy[criteria.name] = criteria.value;
  });
  $scope.newfriends = $filter('filter')($scope.friends, searchBy);
}

和HTMl如下

<div id="searchy">

<ul class="list-unstyled">
  <li style="display: inline-block" ng-repeat="crtia in newCriteria">
    <table>
      <tr>

        <td>
          <select ng-model="crtia.name" ng-options="searchopt for searchopt in searchcriteria " ng-click="searchy.check()"></select>
        </td>
        <td>
          <input ng-model="crtia.value" placeholder="{{crtia.name}}" ng-change="newList()" />
        </td>

      </tr>
    </table>
  </li>
</ul>  <button ng-click="searchy.generate()">Add Criteria</button> </div>

这是更新的插件。
http://plnkr.co/edit/r5OcI366dyvLQ24fFIje?p=preview。

关于javascript - 在angularjs中动态设置过滤器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33514431/