Angular JS - 按键名过滤对象键

Question

我有对象

persons = {
    name : 'Thomas M',
    username : 'mthomas',
    company : 'XYZ',
    email : 'tom@xyz.com'
    city : 'Philadelphia',
    country : 'USA'
};

是否有任何可以按键名称过滤该对象的方法，即如果我按关键字 - name 进行过滤，它应该显示姓名用户名

AngularJS 过滤器对值起作用，但对键值起作用。

Answer 1

您可以创建一个遍历对象的 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: 'tom@xyz.com',
    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>

Answer 2

非常感谢 AWolf 的回答。

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

请在下面找到 fiddle 以供参考，并让我知道您的意见

        <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: 'tom@xyz.com',
          city: 'Philadelphia',
          country: 'USA'
        };

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



      });

    /* Styles go here */

    .person {
      border: none
    }

谢谢赛

Angular JS - 按键名过滤对象键

Angular JS - Filter object keys by key names

angularjs

angularjs-filter