角度js中的多级json滤波器

时间:2018-03-15 03:50:49

标签: javascript angularjs json

我是角度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 

我不知道怎么做这个我试过谷歌但没有发现请帮帮我

3 个答案:

答案 0 :(得分:1)

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

你的filterStatus应该保存模型值

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

答案 1 :(得分:1)

&#13;
&#13;
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)
    }

  }
})
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

使用{$: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>