Revisions to Angularjs : Filter conditionaly

added 1396 characters in body

Source Link

edited May 16, 2017 at 5:48

38.3k
15
85
73

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = [
      {
        id: 1,
        name: 'name1'
      },{
        id: 2,
        name: 'name2'
      },{
        id: 3,
        name: 'name3'
      },{
        id: 3,
        name: 'aaaaa'
      }
    ];
    
    $scope.getCondition = function() {
      var obj = {};
      obj[$scope.key] = $scope.value;
      return obj;
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  Key: <input type="text" ng-model="key">
  Value: <input type="text" ng-model="value">
  <div ng-repeat="item in data | filter: getCondition()">
    {{item.name}}
  </div>
</div>

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = [
      {
        id: 1,
        name: 'name1'
      },{
        id: 2,
        name: 'name2'
      },{
        id: 3,
        name: 'name3'
      },{
        id: 3,
        name: 'aaaaa'
      }
    ];
    
    $scope.getCondition = function() {
      var obj = {};
      obj[$scope.key] = $scope.value;
      return obj;
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  Key: <input type="text" ng-model="key">
  Value: <input type="text" ng-model="value">
  <div ng-repeat="item in data | filter: {[key]:value}">
    {{item.name}}
  </div>
</div>

and there is another way while using ES6' new feature {[key]: value}, but this may now work for some browsers.

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.$watch("key", function() {
      console.log({[$scope.key]:$scope.value});
    });
    $scope.$watch("value", function() {
      console.log({[$scope.key]:$scope.value});
    });
    $scope.data = [
      {
        id: 1,
        name: 'name1'
      },{
        id: 2,
        name: 'name2'
      },{
        id: 3,
        name: 'name3'
      },{
        id: 3,
        name: 'aaaaa'
      }
    ];
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  Key: <input type="text" ng-model="key">
  Value: <input type="text" ng-model="value">
  
  <div ng-repeat="item in data | filter: {[key]: value}">
    {{item.name}}
  </div>
</div>

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = [
      {
        id: 1,
        name: 'name1'
      },{
        id: 2,
        name: 'name2'
      },{
        id: 3,
        name: 'name3'
      },{
        id: 3,
        name: 'aaaaa'
      }
    ];
    
    $scope.getCondition = function() {
      var obj = {};
      obj[$scope.key] = $scope.value;
      return obj;
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  Key: <input type="text" ng-model="key">
  Value: <input type="text" ng-model="value">
  <div ng-repeat="item in data | filter: getCondition()">
    {{item.name}}
  </div>
</div>

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = [
      {
        id: 1,
        name: 'name1'
      },{
        id: 2,
        name: 'name2'
      },{
        id: 3,
        name: 'name3'
      },{
        id: 3,
        name: 'aaaaa'
      }
    ];
    
    $scope.getCondition = function() {
      var obj = {};
      obj[$scope.key] = $scope.value;
      return obj;
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  Key: <input type="text" ng-model="key">
  Value: <input type="text" ng-model="value">
  <div ng-repeat="item in data | filter: {[key]:value}">
    {{item.name}}
  </div>
</div>

and there is another way while using ES6' new feature {[key]: value}, but this may now work for some browsers.

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.$watch("key", function() {
      console.log({[$scope.key]:$scope.value});
    });
    $scope.$watch("value", function() {
      console.log({[$scope.key]:$scope.value});
    });
    $scope.data = [
      {
        id: 1,
        name: 'name1'
      },{
        id: 2,
        name: 'name2'
      },{
        id: 3,
        name: 'name3'
      },{
        id: 3,
        name: 'aaaaa'
      }
    ];
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  Key: <input type="text" ng-model="key">
  Value: <input type="text" ng-model="value">
  
  <div ng-repeat="item in data | filter: {[key]: value}">
    {{item.name}}
  </div>
</div>

added 69 characters in body

Source Link

edited May 16, 2017 at 5:30

Pengyy

38.3k
15
85
73

tryyou can bind a function to filter which returns the below examplefilter condition using scope variables.

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = [
      {
        id: 1,
        name: 'name1'
      },{
        id: 2,
        name: 'name2'
      },{
        id: 3,
        name: 'name3'
      },{
        id: 3,
        name: 'aaaaa'
      }
    ];
    
    $scope.getCondition = function() {
      var obj = {};
      obj[$scope.key] = $scope.value;
      return obj;
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  Key: <input type="text" ng-model="key">
  Value: <input type="text" ng-model="value">
  <div ng-repeat="item in data | filter: getCondition()">
    {{item.name}}
  </div>
</div>

try the below example.

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = [
      {
        id: 1,
        name: 'name1'
      },{
        id: 2,
        name: 'name2'
      },{
        id: 3,
        name: 'name3'
      },{
        id: 3,
        name: 'aaaaa'
      }
    ];
    
    $scope.getCondition = function() {
      var obj = {};
      obj[$scope.key] = $scope.value;
      return obj;
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  Key: <input type="text" ng-model="key">
  Value: <input type="text" ng-model="value">
  <div ng-repeat="item in data | filter: getCondition()">
    {{item.name}}
  </div>
</div>

you can bind a function to filter which returns the filter condition using scope variables.

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = [
      {
        id: 1,
        name: 'name1'
      },{
        id: 2,
        name: 'name2'
      },{
        id: 3,
        name: 'name3'
      },{
        id: 3,
        name: 'aaaaa'
      }
    ];
    
    $scope.getCondition = function() {
      var obj = {};
      obj[$scope.key] = $scope.value;
      return obj;
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  Key: <input type="text" ng-model="key">
  Value: <input type="text" ng-model="value">
  <div ng-repeat="item in data | filter: getCondition()">
    {{item.name}}
  </div>
</div>

Source Link

answered May 16, 2017 at 5:23

Pengyy

38.3k
15
85
73

try the below example.

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.data = [
      {
        id: 1,
        name: 'name1'
      },{
        id: 2,
        name: 'name2'
      },{
        id: 3,
        name: 'name3'
      },{
        id: 3,
        name: 'aaaaa'
      }
    ];
    
    $scope.getCondition = function() {
      var obj = {};
      obj[$scope.key] = $scope.value;
      return obj;
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  Key: <input type="text" ng-model="key">
  Value: <input type="text" ng-model="value">
  <div ng-repeat="item in data | filter: getCondition()">
    {{item.name}}
  </div>
</div>

Collectives™ on Stack Overflow

Return to Answer