2016-05-31 33 views
1

我有对象的人角JS - 通过按键名称筛选对象键

persons = { 
    name : 'Thomas M', 
    username : 'mthomas', 
    company : 'XYZ', 
    email : '[email protected]' 
    city : 'Philadelphia', 
    country : 'USA' 
}; 

没有任何过滤的,如果我通过关键字过滤,即键名对象 - 名称,它将显示 名 用户名

AngularJS过滤器适用于价值而关键的价值。

+0

Plunker链路https://plnkr.co/edit/7NEruSOtUjIWS5ceKe36?p=preview参考这是我目前的工作,并尝试不同的选择,以找到解决方案 –

回答

1

谢谢您的回答很多AWolf。

我找到了简单的基于密钥的过滤方法。

请在下面找到参考的小提琴,让我知道你的意见

 <body> 
     <div ng-app="myApp" ng-controller="myCtrl as mainCtrl"> 
     current filter: 
     <input ng-model="field" ng-change="mainCtrl.cur" /> 
     <div ng-repeat="x in keys | filter:field"> 
      <p>{{x}} : 
      <input readonly="" type="text" ng-model="person[x]" class="person" /> 
      </p> 
     </div> 
     </div> 
    </body> 

    angular.module('myApp', []) 
     .controller('myCtrl', function MainController($scope) { 
     $scope.person = { 
      name: 'Thomas M', 
      username: 'mthomas', 
      company: 'XYZ', 
      email: '[email protected]', 
      city: 'Philadelphia', 
      country: 'USA' 
     }; 

     $scope.keys = Object.keys($scope.person); 



     }); 

    /* Styles go here */ 

    .person { 
     border: none 
    } 

感谢 西

+0

https://jsfiddle.net/Nagasai_Aytha/eauvh71L/1/ –

+0

好的解决方案。你也可以创建一个自定义过滤器,但你的方式也是可以的。我只是不喜欢你的关键迭代ng-repeat标记。它正在工作,但我认为''(键,值)'ng-repeat语法更易于使用/阅读。请看看[小提琴](https://jsfiddle.net/xz7ykw4z/)。 – AWolf

+0

看起来不错..谢谢AWolf :) ..投票给你:) –

2

您可以创建一个迭代对象的for循环,并检查是否需要选择属性。

如果你不喜欢编码,你可以使用underscore.pick

请看看下面的演示或在这fiddle

angular.module('demoApp', []) 
 
    .controller('mainController', MainController); 
 

 
function MainController() { 
 
    var vm = this; 
 

 
    var person = { 
 
    name: 'Thomas M', 
 
    username: 'mthomas', 
 
    company: 'XYZ', 
 
    email: '[email protected]', 
 
    city: 'Philadelphia', 
 
    country: 'USA' 
 
    }; 
 

 
    vm.curFilter = 'name, username'; 
 

 
    vm.applyFilter = function() { 
 
    var filterData = vm.curFilter 
 
     .replace(/\s/g, '').split(','); 
 
    vm.filteredPerson = pick(person, filterData); 
 
    }; 
 

 
    vm.applyFilter(); // initial apply 
 

 
    function pick(obj) { 
 
    var keys = Object.keys(obj), 
 
     args = arguments[1] instanceof Array ? arguments[1] : [].slice.apply(arguments), 
 
     key = '', 
 
     picked = {}; 
 

 
    for (var i = 0; i < keys.length; i++) { 
 
     key = keys[i]; 
 
     //console.log(key, args, args.indexOf(key)); 
 
     if (args.indexOf(key) !== -1) { 
 
     picked[key] = obj[key]; 
 
     } 
 
    } 
 

 
    return picked; 
 
    } 
 

 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController as mainCtrl"> 
 
    current filter: 
 
    <input ng-model="mainCtrl.curFilter" ng-change="mainCtrl.applyFilter()"> 
 
    <pre> 
 
{{mainCtrl.filteredPerson | json : 2}} 
 
</pre> 
 
</div>