Dexter
Dexter

Reputation: 1796

Multi level json filter in angular js

I am new in angular js i want to put filter in ng-repeat i have json like this

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

I want to put filter on lastValue i tested like this

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

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

I don't know how to do this i tried google but nothing found please help me

Upvotes: 0

Views: 80

Answers (3)

Slava Utesinov
Slava Utesinov

Reputation: 13488

Use {$:filterStatus} construction:

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>

Upvotes: 0

user8893882
user8893882

Reputation:

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>

Upvotes: 1

Kalleshwar Kalshetty
Kalleshwar Kalshetty

Reputation: 544

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

your filterStatus should hold model value

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

Upvotes: 1

Related Questions