如何在具有id相关名称的过滤器的angularjs中使用过滤器

时间:2017-06-10 05:07:19

标签: javascript angularjs

在我的angular应用中,我必须使用过滤功能,但我无法获得输出。我已将id存储在DB中,但在ng-repeat我正在使用函数并从另一个范围获取相关的基于id的名称。它工作正常,但过滤器无法正常工作。

注意:iFilter是基于工作的ID,我需要基于name进行过滤,请帮助如何执行此操作

模板代码:

<input type="text"  ng-model="json1.Name" class="searchbox" />
<hr/>Ng-Repeat<hr/>
<div ng-repeat="json in myJson | filter:json1">
  <li>  {{showCartName(json) || 'select'}}</li>     
</div>

控制器:

angular.module('app',['QuickList']).controller('mainCtrl', function($scope,$filter){
  $scope.myJson = [{id:1},{id:2}]
  $scope.myJson1 = [{id:1,Name:"one"},{id:2,Name:"two"}]

  $scope.showCartName = function (json) {
    var SelectStream = [];
    if (json.id) {

      SelectStream = $filter('filter')($scope.myJson1, { id: json.id });
    }
    return SelectStream.length ? SelectStream[0].Name : 'Select';
  };
})

此处我附上 fiddle

2 个答案:

答案 0 :(得分:1)

根据您的要求this answer就足够了。

虽然您也可以使用custom filter,但这可以让您灵活地实现您想要的任何逻辑。

在你的控制器中添加:

$scope.customFilter = function (json){
        if ($scope.json1 === undefined) return true;
        else{
         var Name =  $scope.showCartName(json);
            return (Name.indexOf($scope.json1) !== -1);
        }
    };

并更改HTML:

 <div ng-repeat="json in myJson  | filter:customFilter">

http://jsfiddle.net/HgDA7/638/

答案 1 :(得分:0)

我认为这足以满足您的要求。

 <div ng-app='app' ng-controller='mainCtrl'>
 <input type="text"  ng-model="json1.Name" class="searchbox" />
 <hr/>Ng-Repeat<hr/>`enter code here`
 <div ng-repeat="json in myJson1 | filter:json1.Name">
    <li>    {{showCartName(json) || 'select'}}</li>
 </div>

http://jsfiddle.net/HgDA7/636/