AngularJS过滤器在对象中不起作用

时间:2015-05-08 14:06:15

标签: javascript arrays angularjs filter cakephp-2.0

我的AngularJS过滤器无法使用Object。

查看:

<input type="text" ng-model="searchKeyUser.$" placeholder="Pesquisar Chaves" class="form-control"><br>
<ul class="list-group">
    <li class="list-group-item clicavel chaves" ng-repeat="chave in keyUsers | filter:searchKeyUser" ng-class="{ active:Grupo.isActiveKey(chave.Chave.id)}" ng-click="Grupo.mostrar()">
          {{chave.Chave.chave}}{{chave.show}}
    </li>
</ul>

我尝试使用searchKeyUser。$,searchKeyUser.Chave。$,searchKeyUser.Chave.chave,什么都没发生。详细信息:文本{{chave.Chave.chave}}{{chave.show}}正在运行。

编辑: Js代码:

(function() {
  var app = angular.module('groupUsers', []);
  app.controller('GroupsController', function($scope, $http){

    //Busca rel Chaves Usuarios
    $http.get(myBaseUrl + '/QlikRelKeyUser/retornoGroups').success(function(data, status, headers, config) {
      $scope.keyUsers = data;
      console.log($scope.keyUsers);
      for(x in $scope.keyUsers){
        aux = 0;
        qtd = $scope.keyUsers[x].QlikUser.length;
        for(y in $scope.keyUsers[x].QlikUser){
          aux++;
          if(qtd == 1){
            $scope.keyUsers[x].show = ' (' + $scope.keyUsers[x].QlikUser[y].nome + ')';
          }else if(aux == qtd){
            $scope.keyUsers[x].show += ', ' + $scope.keyUsers[x].QlikUser[y].nome + ')';
          }else{
            if(aux==1){
              $scope.keyUsers[x].show = ' (' + $scope.keyUsers[x].QlikUser[y].nome;
            }else{
              $scope.keyUsers[x].show += ', ' +       $scope.keyUsers[x].QlikUser[y].nome;
            }
          }
        }
      }
      console.log('');
    }).error(function(data, status, headers, config) {
      console.log('NÃO FUNFOU');
      console.log(config);
    });
    $scope.searchKeyUser = {$:''};
   });

编辑2: 相同观点:

<input type="text" ng-model="searchGroup.$" placeholder="Pesquisar Grupos" class="form-control"><br>
        <ul class="list-group" >
          <li class="list-group-item clicavel" ng-repeat="group in grupos | filter:searchGroup" ng-class="{ active:Grupo.isSet(group.QlikUserGroup.id)}" ng-click="Grupo.setActive(group.QlikUserGroup.id)">
            {{group.QlikUserGroup.nome}}
            <span class='badge bg-important'>1</span>
            <span class='badge' stylee='padding-right:30px;'>{{Grupo.totalKeys(group.QlikUserGroup.id)}}</span>
          </li>
        </ul>

相同的JS:

$http.get(myBaseUrl + '/QlikUserGroup/retornoGroups').success(function(data, status, headers, config) {
      $scope.grupos = data;
    }).error(function(data, status, headers, config) {
      console.log('NÃO FUNFOU');
      console.log(config);
    });

我的console.log($scope.grupos);返回:

Array[67]
0: Object
$$hashKey: "object:530"
QlikUserGroup: Object
id: "1"
nome: "Name name name"
__proto__: Object
__proto__: Object
1: Object
2: Object
3: Object
4: Object
...

1 个答案:

答案 0 :(得分:0)

Angular filter仅适用于数组,但您尝试传递 object 。所以你至少有两个解决方案

  • 修改服务器端并返回数组
  • 从js中的对象生成数组,类似这样的

    $scope.keyUsers = [];
    console.log(data);
    for(x in data){
        var el = data[x];
        $scope.keyUsers.push(el);
        el.show = '('+ el.QlikUser.map(function(el){ return el.nome; }).join(', ') +')';
    }
    console.log($scope.keyUsers);
    

var data = {
  '1': {
    'QlikUser': [{
      nome: 'a'
    }, {
      nome: 'b'
    }, {
      nome: 'c'
    }, {
      nome: 'd'
    }, ]
  }
}

var keyUsers = [];
console.log(data);
for (x in data) {
  var el = data[x];
  keyUsers.push(el);
  el.show = '(' + el.QlikUser.map(function(el) {
    return el.nome;
  }).join(', ') + ')';
}
console.log(keyUsers);