Ng-Change-7

 

In this example of Ng-Change, We have 4 records in object and we will filter the records based on the selection so we have checkbox to select active of inactive records. So if user select the checkbox, it will show the active records. Here is the HTML code to filter the record: {{row.Active?'Active':'Disabled'}} {{row.text}}

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app="app"> <div class="container"> <div class="row" ng-controller="myController"> <div class="col-md-12"> <br /> <br /> <div class="row"> <div class="col-md-9"> Filter Active Records </div> <div class="col-md-3"> <div class="row form-group"> <div class="col-md-2 control-label">Active</div> <div class="col-md-10"> <input type="checkbox" ng-model="active" /> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <table class="table table-striped"> <tbody> <tr ng-repeat="row in records | filter:active" style="cursor:pointer"> <td>{{row.Active?'Active':'Disabled'}}</td> <td>{{row.text}}</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <script> var app = angular.module("app", []); app.controller('myController', ['$scope', function ($scope) { $scope.records = [{ Active: true, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.' }, { Active: true, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.' }, { Active: false, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.' }, { Active: false, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown galley of type to make a type specimen book.' }] }]); </script> </body> </html>
Output