Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

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

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


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs filter json object to show/hide or update elements</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
$scope.sample = [{
id: '1',
name: 'Suresh Dasari'
}, {
id: '2',
name: 'Rohini Alavala'
}, {
id: '3',
name: 'Mahendra Dasari'
}, {
id: '4',
name: 'Madhav Sai'
}, {
id: '5',
name: 'Mahesh Dasari'
}, {
id: '6',
name: 'Sateesh Alavala'
}];

$scope.checkvalues = function (user) {
return user.id != "5";
}
});
</script>
</head>
<body data-ng-app="sampleapp" data-ng-controller="samplecontrol">
<form id="form1">
<div ng-repeat="user in sample | filter:checkvalues">
{{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 RSS subscribe by email Subscribe by Email

1 comments :

Anonymous said...

Hey than'x buddy , it's useful for me!!!

Give your Valuable Comments

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

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.