Question

我有对象

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

是否有任何按键名称过滤该对象，即如果我按关键字 - 名称过滤，则应显示名称用户名

AngularJS过滤器适用于值，但适用于键值。

Answer 1

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

如果您不想对其进行编码，可以使用underscore.pick进行编码。

请查看下面的演示或此fiddle。

＆＃13;

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;
  }

}

＆＃13;

<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>

＆＃13;

Answer 2

非常感谢阿道夫的回答。

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

请找下面的小提琴以供参考，让我知道你的意见

        <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 - 按键名过滤对象键

2 个答案: