Angularjs filter based on the comma element

Question

I want to filter angularjs for the following json format value

[

{"id":"1","video_title":"Sample1","tags":"2,12,13","featured":"1"},

{"id":"2","video_title":"Sample2","tags":"5,13","featured":"1"},

{"id":"2","video_title":"Sample3","tags":"2,13","featured":"0"}

] 



<ul><li ng-repeat="single in all_json | filter:customFilter"></li></ul>

<a ng-click="filterBasedonTag(2)">Filter</a>

// Script

 $scope.filterBasedonTag = function(x) {
 $scope.customFilter = x;
}

If I pass tags value = 2 I want to print only video_title "sample1" and "Sample 3". It is possible to filter. Is any solution please. Thanks to all

Possible duplicate of [AngularJS custom filter function](https://stackoverflow.com/questions/16474091/angularjs-custom-filter-function) — Pop-A-Stash, Apr 23 '18 at 13:35
Bro I need to compare inside tags element, your given duplicate thing is different — Rijo, Apr 23 '18 at 13:38
You can still use the link he gave you. You just need to adapt it to your use case. — Giovani Vercauteren, Apr 23 '18 at 13:57

score 1 · Accepted Answer · answered Apr 23 '18 at 13:53

You can pass parameters into a filter with ... | your_filter : {"anything" : parameters} syntax, where parameters are bounded to scope and can be changed dynamically. Here is an example with a simple custom filter:

var app = angular.module('myApp', []);
app.filter('customFilter', function() {
  return function(x, y) {
    var temp = [];
    for (var i = 0; i < x.length; i++) {
      if (x[i].tags.split(',').indexOf("" + y.tag) != -1) {
        temp.push(x[i]);
      }
    }
    return temp;
  };
});
app.controller('namesCtrl', function($scope) {
  $scope.all_json = [{
      "id": "1",
      "video_title": "Sample1",
      "tags": "2,12,13",
      "featured": "1"
    },
    {
      "id": "2",
      "video_title": "Sample2",
      "tags": "5,13",
      "featured": "1"
    },
    {
      "id": "2",
      "video_title": "Sample3",
      "tags": "2,13",
      "featured": "0"
    }
  ]
  $scope.tag = 2;
  $scope.filterBasedonTag = function(tag) {
    $scope.tag = tag;
  }
});

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

<div ng-app="myApp" ng-controller="namesCtrl">
  <li ng-repeat="single in all_json | customFilter:{'tag':tag}">
    {{single.video_title}} - {{single.tags}}
  </li>
  <hr>
  <a ng-click="filterBasedonTag(2)">Filter 2 </a><br>
  <a ng-click="filterBasedonTag(5)">Filter 5 </a><br>
  <a ng-click="filterBasedonTag(13)">Filter 13 </a><br>
  <hr> 
  Selected tag: {{tag}}
</div>

Hi Bro its working. Thanks! I have doubt if i pass two tag value at a time in checkbox how to filter. `` — Rijo, Apr 24 '18 at 05:03
@Rijo checkbox ng-model returns only `true` or `false`, but if you need to pull out a tag number, then maybe you would want to use `ng-true-value` and specify the number there. Here is an example: `` — Aleksey Solovey, Apr 24 '18 at 08:13

Giovani Vercauteren · Answer 2 · 2018-04-23T14:04:05.897

Using a custom function. This is an adapted version of the duplicate link in comments.

BEWARE: The custom function I wrote is very simple and will return values contains just a part of the criteria, so in this case 2 will return everything containing a 2 (12, 20, 32, 200, ...). I suggest you write a proper function yourself.

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

app.controller('MainCtrl', function($scope) {
  $scope.criteria = 2;
  
  $scope.criteriaMatch = function( criteria ) {
    return function( item ) {
      return item.tags.indexOf(criteria) > -1;
    };
  };
  
  $scope.items =[
{"id":"1","video_title":"Sample1","tags":"2,12,13","featured":"1"},
{"id":"2","video_title":"Sample2","tags":"5,13","featured":"1"},
{"id":"2","video_title":"Sample3","tags":"2,13","featured":"0"}
];
});

<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
  <input type="text" ng-model="criteria">
  <div ng-repeat="item in items | filter:criteriaMatch(criteria)">
    {{ item | json }}
  </div>
</body>
</html>

if you search for `3` it selects objects with tags containing `13`, as if 3 is in there. You should attempt to split the tags strings first and search within the array instead — Aleksey Solovey, Apr 23 '18 at 14:03
That's for himself to do. I did add a notice to the main post suggesting he writes a proper function himself. — Giovani Vercauteren, Apr 23 '18 at 14:04
Hi bro instead of `` how to hadle with two three checkbox, that means i need to transfer multiple values. — Rijo, Apr 24 '18 at 05:07

Angularjs filter based on the comma element

2 Answers2