Angular js中的多级json过滤器答案

【问题标题】：Multi level json filter in angular jsAngular js中的多级json过滤器
【发布时间】：2018-03-15 03:50:49
【问题描述】：

我是 Angular js 的新手，我想将过滤器放入 ng-repeat 我有这样的 json

    var data = [
    {name:test1,b1:{lastValue:0},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}}
    {name:test2,b1:{lastValue:6},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
{name:test3,b1:{lastValue:6},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
    ]

我想把过滤器放在我这样测试过的 lastValue 上

ng-repeat = "d in data | filter:{*.lastValue:filterStatus}"

filterStatus // contain value of filter which user selected but its not working

我不知道该怎么做，我尝试了谷歌，但没有找到，请帮助我

【问题讨论】：

标签： javascript angularjs json

【解决方案1】：

<input ng-model="filterStatus" type="text">

您的 filterStatus 应该包含模型值

ng-repeat = "d in data | filter:filterStatus"

【讨论】：

【解决方案2】：

var app = angular.module("Profile", []);
app.controller("ProfileCtrl", function($scope) {
  $scope.filter_val = {}
  $scope.data = [{
    name: 'test1',
    b1: {
      lastValue: 0
    },
    index: 'b1'
  }, {
    name: 'test2',
    b2: {
      lastValue: 6
    },
    index: 'b2'
  }, {
    name: 'test3',
    b3: {
      lastValue: 6
    },
    index: 'b3'
  }, {
    name: 'test4',
    b4: {
      lastValue: 0
    },
    index: 'b4'
  }, {
    name: 'test5',
    b5: {
      lastValue: 89
    },
    index: 'b5'
  }, {
    name: 'test6',
    b6: {
      lastValue: 68
    },
    index: 'b6'
  }]
  $scope.own_filter = function(val) {
    if (!$scope.filter_val.value)
      return true;
    else {
      return (String(val[val['index']]['lastValue'] || '').indexOf($scope.filter_val.value) != -1)
    }

  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
  <input type="text" ng-model="filter_val.value" placeholder="Enter Last Value">
  <div class="row" ng-repeat="event in data |filter:own_filter track by $index ">
    <h4>{{'Name : ' + event.name}}------{{'Last Value : '+event[event['index']]['lastValue']}}</h4>
  </div>
</body>

【讨论】：

嘿抱歉，但我更新了我的问题，请检查我发布了错误的 json 现在它是正确的，请检查

【解决方案3】：

使用{$:filterStatus}构造：

angular.module('app', []).controller('ctrl',function($scope){
  $scope.data = [
    {name:'test1',b1:{lastValue:1},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}},
    {name:'test2',b1:{lastValue:2},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}},
    {name:'test3',b1:{lastValue:3},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
  ]
})

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

<div ng-app='app' ng-controller='ctrl'>
  <input type='number' ng-model='filterStatus' ng-init='filterStatus=1'>
  <ul>
    <li ng-repeat='item in data | filter: {$:filterStatus}'>{{item.name}}</li>
  </ul>
</div>

【讨论】：