Sample Angular binding

by Jimmy Chandra

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-app="myApp" class="container" style="margin-top:20px" ng-controller="AController">
    <div class="form-group">
        <label for="filter">Filter:</label><input id="filter" name="filter" class="form-control" type="text" ng-model="filter" />
        
    </div>
    
    <div class="panel panel-default" ng-show="(diseaseList | filter: filterFn).length">
        <div class="panel-heading">Diseases</div>
        <table class="table table-striped table-bordered table-condensed table-hover" >
            <thead>
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr class='animate-repeat' ng-repeat="disease in diseaseList | filter: filterFn | orderBy:'DiseaseName'">
                    <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >{{ disease.DiseaseCode }}</td>
                    <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >{{ disease.DiseaseName }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <p ng-show="(diseaseList | filter: filterFn).length < 1">No match</p>
 </div>

JavaScript

(function() {
    var app = angular.module('myApp',[]);
    
    app.service('dataRepository', function() {
        this.getData = function() { return JSON.parse('[{ "DiseaseCode" : "0001", "DiseaseName" : "Flu" },{"DiseaseCode" : "0002", "DiseaseName" : "Appendicitis"},{"DiseaseCode" : "0003", "DiseaseName" : "Malaria"},{"DiseaseCode" : "0004", "DiseaseName" : "Dengue Fever"},{"DiseaseCode" : "0005", "DiseaseName" : "Cancer"},{"DiseaseCode" : "0006", "DiseaseName" : "Polio"}]'); };
    });
    
    app.controller('AController', ['$scope','dataRepository',function($scope, dataRepository) {
        $scope.filter = "";
        $scope.filterFn = function(el) {
            var fu = $scope.filter.toUpperCase();
            return el.DiseaseCode.toUpperCase().indexOf(fu) > -1 || el.DiseaseName.toUpperCase().indexOf(fu) > -1;
        };
        $scope.diseaseList = dataRepository.getData();
    }]);
})();