Angularjs Filter JSON Object to Show / Hide / Update Elements based on Conditions

By: Suresh Dasari Jul 16, 2015

Introduction:

Here I will explain how to use AngularJS to filter JSON object to show or hide or update elements with example or AngularJS filter json object in controller with example. By using filter option in ng-repeat we can enable/disable or show/hide required elements from JSON object.

Description:

In previous articles I explained Angularjs ui grid cell template click event, bind dropdownlist in angularjs, Angularjs convert lower case to upper case while typing text, Angularjs refresh div for every 1 second using interval mode and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to filter JSON object to change elements behavior in using AngularJS.

To show or hide values based on JSON object in AngularJS we need to write the code like as shown below

$scope.checkvalues = function (user) {

return user.id != "5";

}

If you want to check it in complete example you need to write the code like as shown below

<head>

<title>angularjs filter json object to show/hide or update elements</title>

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

app.controller('samplecontrol', function ($scope) {

$scope.sample = [{

id: '1',

}, {

id: '2',

}, {

id: '3',

}, {

id: '4',

}, {

id: '5',

}, {

id: '6',

}];

$scope.checkvalues = function (user) {

return user.id != "5";

}

});

</script>

</head>

{{user.name}} <br/>

</div>

</form>

</body>

</html>

Demo

If you check below output it will display all values except id = 5

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

1 comments :

Anonymous said...: Hey than'x buddy , it's useful for me!!!; July 23, 2015 at 11:47 PM

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments ( Atom )

ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview