使用AngularJS过滤搜索结果

时间:2017-01-18 16:50:31

标签: javascript angularjs

一个简单的问题:

我正在angularjs中创建一个过滤器来动态获取变量,并从前端使用这个过滤器。

<a href="<?= url ?>" target="_blank"><button>Open file</button></a>

这是javascript。

<div ng-if="(services | searchValue : 'type' : 'facebook').active == true">
...
</div>

不幸的是,即使发现结果也没有传递给模板。

如果我将这样使用它:

.filter('searchValue', function () {
        return function (array, name_var, value) {
            angular.forEach(array, function(v, k) {
                if (v[name_var] == value) {
                    return v;
                }
            });
            return [];
        };
    })

这没有任何价值。有什么建议吗?

1 个答案:

答案 0 :(得分:1)

我已经为您提供的信息创建了示例。运行以下示例检查。希望这对你有所帮助。

我猜ng-if本身只期望变量而不是表达式。仅提供具有值的变量,即(services | searchValue : 'type' : 'facebook').active 而不是表达式

&#13;
&#13;
var app = angular.module('application', []);

app.filter('customfilter', function() {
  return function(array, name_var, value) {
    var filteredArray = {};
    angular.forEach(array, function(v, k) {
      if (v[name_var] == value) {
        filteredArray = v;
        return false;
      }
    });
    return filteredArray;
  }

});
app.controller('sampleController', function($scope, $filter) {
  $scope.data = [{
    "type": "facebook",
    "active": false
  }, {
    "type": "linkedin",
    "active": false
  }, {
    "type": "twitter",
    "active": false
  }, {
    "type": "google",
    "active": false
  }];

  $scope.anotherdata = [{
    "type": "facebook",
    "active": true
  }, {
    "type": "linkedin",
    "active": false
  }];
});
&#13;
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>

<body ng-app="application">
  <div ng-controller="sampleController">

    First div - Active : false
    <div ng-if="(data | customfilter:'type':'facebook').active">
      Your div content goes over here
    </div>
    <br>
    <br>Second div - Active : true
    <div ng-if="(anotherdata | customfilter:'type':'facebook').active">
      Second div rendered
    </div>
  </div>
</body>
&#13;
&#13;
&#13;