AngularJS过滤对象数组

时间:2014-10-02 14:19:55

标签: angularjs angularjs-ng-repeat

我有这个JSON对象。

 var UsersList=[ 
    {
       "User" : {

          "IdUser" : "admin",
          "FirstName" : "mirco",
          "LastName" : "sabatino"

       }
    }, {
       "User" : {

          "IdUser" : "coordinator",
          "FirstName" : "coordinator",
          "LastName" : ""

       }
    }, {
       "User" : {

          "IdUser" : "test",
          "FirstName" : "publisher",
          "LastName" : "Diaz"

       }
    }, {
       "User" : {

          "IdUser" : "work",
          "FirstName" : "ingester",
          "LastName" : "Brown"

       }
    } 
    ] ;

我希望在ng-repeat中过滤LastName值。

<div class="col-md-6" ng-repeat="users in UsersList | filter: {User.LastName : filterSearchLetter}">
我的控制器中的

filterSearchLetter值由

填充
$scope.filterLetterUser=function(letter){
       $scope.filterSearchLetter=letter;
       console.log($scope.filterSearchLetter);
    };

但这不起作用。

3 个答案:

答案 0 :(得分:1)

请参阅我的plnkr了解解决方案http://plnkr.co/edit/l27xUQ?p=preview。我还使用ng-change实现了您所需的UI行为。希望它有所帮助。

详细解释我向你提供Todd Motto的博客 - http://toddmotto.com/everything-about-custom-filters-in-angular-js/

要调用过滤器,语法是过滤器函数名称,后跟参数。

定义您需要做的过滤器(这是为您的数据修改的Todd Motto代码的副本)

todos.filter('startsWithLetter', function () {
    return function (items, letter) {
        var filtered = [];
        var letterMatch = new RegExp(letter, 'i');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (letterMatch.test(item.User.LastName.substring(0, 1))) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

答案 1 :(得分:0)

这不是一个有效的对象:{User.LastName : filterSearchLetter}它实际上应该抛出类似

之类的异常
 Uncaught SyntaxError: Unexpected token .

您可能想要尝试的是:{"User": {"LastName" : filterSearchLetter} }

答案 2 :(得分:0)

迭代对象数组,请参阅: angularjs - ng-repeat: access key and value from JSON array object

您可能必须使用JS_Obj = JSON.parse(JSON_Obj)转换为有效的JS对象;

也许是这样的:

//iterate through array
<ul ng-repeat="users in UsersList">
  //iterate through Object
  <li ng-repeat=(key, value) in users | filter: {User.LastName : filterSearchLetter}>
     {{key}} : {{value}}
  </li>
</ul>