Angular如何从输入文本中过滤Object.keys答案

【问题标题】：Angular how to filter on Object.keys from input textAngular如何从输入文本中过滤Object.keys
【发布时间】：2016-04-29 14:13:58
【问题描述】：

我有个小问题，我有这个：

$scope.data = {
   parent1:[{
              data:[{name:'John'}]
              child:[{data:'something'}]
           }],
   parent2:[{
              data:[{name:'Charles'}]
              child:[{data:'something'}]
           }],
}

我想将其设置为过滤器，但我只想过滤 Object.keys，如 "parent1, parent2" 来自：

<input type="text" placeholder="Search" ng-model="myFilter">

<li ng-repeat="dt in data | filter : myFilter">

【问题讨论】：

标签： angularjs filter ng-repeat

【解决方案1】：

这可能会让你接近，但它只能找到完全匹配。

<html>

<body>

  <div ng-app="filterApp" ng-controller="filterDemo">

    <input type="text" placeholder="Search" ng-model="myFilter">

    <ul ng-repeat="(key, value) in data | filter : filterList">
      <li>{{key}} {{value}}</li>
    </ul>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
  angular.module("filterApp", []).controller("filterDemo", filterDemo)

function filterDemo($scope) {
  var foo = {
   parent1:[{
              data:[{name:'John'}],
              child:[{data:'something'}]
           }],
   parent2:[{
              data:[{name:'Charles'}],
              child:[{data:'something'}]
           }]
}

$scope.data = [];
for (var key in foo) {
  // must create a temp object to set the key using a variable
  var tempObj = {};
  tempObj[key] = foo[key];
  $scope.data.push(tempObj);
};
console.log($scope.data);



  $scope.filterList=function(object) {
    if ($scope.myFilter) {
     return object.hasOwnProperty($scope.myFilter)
    }
    return true;
  };
}

</script>

</body>

</html>

【讨论】：

【解决方案2】：

你可以这样绑定：

<li ng-repeat="(key,value) in data">
    {{key}}
</li>

【讨论】：

【解决方案3】：

var app = angular.module('app', []);

function TestCtrl($scope) {


  $scope.items = {
    "Auction Platform": [{
      "project_name": "Auction Platform",
      "version_name": "Auction version 1",
      "version_id": 248
    }],
    "Finansme": [{
      "project_name": "Finansme",
      "version_name": "Bug Fixes for External Users v1",
      "version_id": 147
    }]


  };
  $scope.keys = Object.keys($scope.items);
  $scope.values = Object.values($scope.items);
  //console.log($scope.keys);
  //console.log($scope.values);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="TestCtrl">
    <input style="width:70%" type=text ng-model=search placeholder="Type key names which are either 'Auction Platform' or 'Finansme' ">
    <div ng-repeat="item in keys  | filter:search">
      {{items[item][0].version_id}} | {{items[item][0].version_name}}
    </div>
  </div>
</body>

【讨论】：