Question

我正在处理angularjs .my LocationList有两个属性ID和Name.Id是1,11,13,14,15。

我想按照完全匹配ID 10来命名。但问题是我得到的不仅仅是对象。我的意思是它没有返回完全匹配的ID值。为什么它会考虑1,11,13， 14 15以及。我的代码。请告诉我如何使用过滤器获得完全匹配值。

Name = $filter('filter')($scope.LocationList, { ID: 10});


<div ng:app="myApp">
    <div ng-controller="HelloCntl">
        <ul>
            <li > <span>{{itemxx[0].label}}</span>

            </li>
        </ul>
    </div>
</div>

angular.module('myApp', [])
    .controller('HelloCntl', [ '$scope', '$filter', function($scope, $filter) {
        $scope.items = [
            { ID: 8, label: 'item 8' }, 
            { ID: 9, label: 'item 9' }, 
            { ID: 13, label: 'item 13' } ,
            { ID: 10, label: 'item 10'}, 
            { ID: 1, label: 'item 1'}, 
            { ID: 11, label: 'item 11' }, 
            { ID: 12, label: 'item 12' } 
        ];

    $scope.itemxx = $filter('filter')($scope.items, { ID: 1 });
    //console.log(item10);
}]);

她的物品ID没有被订购。所以当我想要获得ID 1的值然后它的Id 13的回归值。

Answer 1

这应该有效：

angular.module('myApp',[]).filter('ID', function(){
    return function(items, value){
        return items.filter(function(item) { return item.ID === value });
    };
});

这里有一个完整的jsFiddle：http://jsfiddle.net/jochenvanwylick/0suogLpk/

用法：

<li ng-repeat="item in items | ID: 10">
    <span>{{item.label}}</span>
</li>

修改

您不需要编写特殊的过滤器，您可以使用开箱即用的过滤：

<li ng-repeat="item in items | filter: {ID:10}"> <span>{{item.label}}</span> </li>

编辑2

我误解了 - 你在控制器中尝试这样做了，并且在AngularJS过滤器中有一个小问题。默认情况下，它会将对象属性值视为字符串，然后执行＆＃39; contains＆＃39;喜欢过滤操作。

如果你想要完全匹配，你必须利用过滤函数的第三个参数comparator并提供一个完全匹配的比较器：

$filter('filter')($scope.items, { ID: 1 }, function(a,b) { return a === b; });

这将有效地进行1 === 1比较，因此对于这种情况将返回true，而在任何其他情况下将返回false。（http://jsfiddle.net/jochenvanwylick/0suogLpk/7/）

Answer 2

您的示例将返回与ID: 1匹配的对象数组。如果该列表中有多个项目，您将获得多个结果。

如果你知道 - 或者不在乎 - 总会有一场激烈的比赛，你可以得到这样的结果：

var Name = $filter('filter')($scope.LocationList, { ID: 1 }, true)[0];

注意[0]结果的索引器$filter以获取返回列表中的第一个元素。另请注意true参数，指出匹配必须是excat（不匹配11,12,13等）

http://plnkr.co/edit/gY7yeflfpURFfWsfV0Ro?p=preview

如果您仍未获得预期结果，请使用console.log（$ scope.LocationList）并在chrome（pref.for me）控制台窗口中获得结果。或者你可以在HTML

中编写这样的内容

{{ LocationList | json }}

检查对象。

$ filter angular return object问题

2 个答案: