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

Bro I need to compare inside tags element, your given duplicate thing is different — Rijo
– Rijo, Commented Apr 23, 2018 at 13:38
You can still use the link he gave you. You just need to adapt it to your use case. — Giovani Vercauteren
– Giovani Vercauteren, Commented Apr 23, 2018 at 13:57

Aleksey Solovey · Accepted Answer · 2018-04-23 13:53:21Z

1

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>

answered Apr 23, 2018 at 13:53

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rijo Over a year ago

Hi Bro its working. Thanks! I have doubt if i pass two tag value at a time in checkbox how to filter.

<input type="checkbox" ng-model="tagsarray.tag" name="tag" ng-click="filterBasedonTag(tagsarray.tag)"  /><input type="checkbox" ng-model="tagsarray.tag" name="tag" ng-click="filterBasedonTag(tagsarray.tag)"  />

Aleksey Solovey Over a year ago

@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: <input type="checkbox" ng-model="tagsarray.tag" ng-true-value="13" ng-false-value=""/>

Giovani Vercauteren · Accepted Answer · 2018-04-23 14:04:05Z

1

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>

edited Apr 23, 2018 at 14:04

answered Apr 23, 2018 at 14:01

Giovani Vercauteren

1,89816 silver badges23 bronze badges

3 Comments

Aleksey Solovey Over a year ago

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

Giovani Vercauteren Over a year ago

That's for himself to do. I did add a notice to the main post suggesting he writes a proper function himself.

Rijo Over a year ago

Hi bro instead of <input type="text" ng-model="criteria"> how to hadle with two three checkbox, that means i need to transfer multiple values.

Collectives™ on Stack Overflow

Angularjs filter based on the comma element

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related