Question

请查看这个小提琴。我正在尝试使用＆＃39;过滤器＆＃39;来自控制器。我有一个数据数组，我想根据附带按钮的文本框中提供的搜索条件进行搜索。

用户输入文字，然后按进入搜索。用户按下原始列表再次出现的文本框上的后退键。

我想从控制器应用过滤器而不是我的部分过滤器。所以我必须与我所拥有的一起工作。

请建议。

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
<input type='text' data-ng-model='search'>
    <button ng-click='newList()'> </button>
        <table> <tr data-ng-repeat= "item in items"><td> {{item.name}}  </td></tr></table>    

    </div>
</div>



var myApp = angular.module('myApp',[]);


function MyCtrl($scope, $filter) {
    $scope.items= [
    {
    id: 0,
    name: "Noman",
    email: "John@email.com"},
{
    id: 1,
    name: "Sameer",
    email: "James@email.com"},
{
    id: 2,
    name: "Humair",
    email: "Jill@email.com"}
];    

$scope.newList =  function () {
$scope.items = $filter('filter')($scope.items,'name',$scope.search)
    }
}

http://jsfiddle.net/r7KH7/66/

Answer 1

您可以通过传递具有您需要过滤器的属性的对象以及需要应用过滤器的值来基于对象属性进行过滤。

因此，在您的情况下，filter参数是：

{
    name: $scope.search
}

然后您可以在控制器中将其用作：

$scope.newList = function () {
    $scope.newItems = $filter('filter')($scope.items,{name: $scope.search})
};

注意 - 您需要使用不同的数组才能在视图中显示而不是原始数组，因为在应用过滤器之后，您仍然希望旧内容使用新值进行过滤。

这意味着，在您的视图中，不是使用原始项目列表$scope.items而是使用$scope.newItems指令中的ng-repeat。

请参阅此处的小提琴：http://jsfiddle.net/M4yRv/

Answer 2

首先，您需要一个包含已过滤项目的附加数组，您需要对此进行迭代。

其次，过滤器的第二个参数应为

{name: $scope.search}

因为您想根据名称属性过滤项目。

以下是您的示例：http://jsfiddle.net/r7KH7/67/

使用＆＃39;过滤＆＃39;来自angularJS中的Controller

2 个答案: