Monday, 4 July 2016

Angularjs Json Filter



HTML


<!DOCTYPE html>
<html ng-app="plunker">
<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css"
          rel="stylesheet">
    <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl" class="container">
    <table>
        <tr>
            <td>Enter ID :</td>
            <td>
                <input type="text" placeholder="Enter ID" ng-model="emp.id" class="form-control"><br>
            </td>
        </tr>
        <tr>
            <td>
                Enter Name :
            </td>
            <td>
                <input type="text" placeholder="Enter Name" ng-model="emp.name" class="form-control"><br>
            </td>
        </tr>
        <tr>
            <td>Enter city :</td>
            <td>
                <input type="text" ng-model="emp.city" placeholder="Enter City" class="form-control"><br>
            </td>
        </tr>
        <tr>
            <td>Enter salary :</td>
            <td>
                <input type="text" ng-model="emp.salary" placeholder="Enter Salary" class="form-control"><br>
            </td>
        </tr>
        <tr>
            <td>
                <a class="btn" ng-click="Add()"><i class="icon-plus"></i>Add</a>
            </td>
            <td align="left">
                <input type="button" class="btn btn-danger" value="Delete" ng-click="Delete(emp.id)">
            </td>
        </tr>
    </table>

    <pre>{{employees|json:14}}
  </pre>
</body>
</html>


JS

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.employees = [{
    id: 1,
    name: "Ranjeet",
    city: "Mumbai",
    salary: 5000
  }, {
    id: 2,
    name: "Abhishek",
    city: "Mumbai",
    salary: 5000
  }, {
    id: 3,
    name: "Gaurav",
    city: "Mumbai",
    salary: 5000
  }, {
    id: 4,
    name: "Shashikant",
    city: "Mumbai",
    salary: 10000
  }];
  $scope.Add = function () {     
      $scope.employees.push({ id: $scope.emp.id, name: $scope.emp.name, city: $scope.emp.city, salary: $scope.emp.salary });
      $scope.reset();
  }

  $scope.reset = function () {
      $scope.emp.id = "";
      $scope.emp.name = "";
      $scope.emp.city = "";
      $scope.emp.salary = "";
  }

  $scope.Delete = function (id) {  
   angular.forEach($scope.employees,function(value,key){
     if(value.id==id){
         $scope.employees.splice(key, 1);
     }
   })

  }
});



Tuesday, 21 June 2016

Angularjs RangeFilter



HTML

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <script src="angular.js"></script>
    <script src="app.js"></script>
    <title></title>
    <meta charset="utf-8" />

</head>
<body ng-controller="MainCtrl">
    <employee-detail></employee-detail>
</body>
</html>


JS
/// <reference path="angular.js" />
var app = angular.module('plunker', []);


app.directive('employeeDetail', function () {
    return {
        restrict: 'E',
        template: [
          '<div>',
          '<p>0',
          '<input type="range" min="0" max="100" step="1" ng-model="ctrl.inputAge" />',
          '100</p>',
          '<span>current min age: {{ ctrl.inputAge }}</span>',
          '<ul>',
          '<table border="1" cellpadding="6" cellspacing="0">',
          '<tr><td>Employee Name</td><td>Employee Age</td><td>Address</td></tr>',
          '<tr ng-repeat="person in ctrl.people | ageFilter:ctrl.inputAge "><td>{{person.name}}</td><td>{{person.age}}</td><td>{{person.address}}</td></tr>',
          '</table>',
          '</ul>',
          '</div>'
        ].join(''),
        controllerAs: "ctrl",
        controller: function () {
            var ctrl = this;
            ctrl.inputAge = 20;

            ctrl.people = [{
                name: 'Justin Bieber',
                address: 'Powai',
                age: 21
            }, {
                name: 'Miley Cyrus',
                address: 'Powai',
                age: 23
            }, {
                name: 'John Legend',
                address: 'Powai',
                age: 37
            }, {
                name: 'Betty White',
                address: 'Powai',
                age: 94
            }, {
                name: 'Roger Waters',
                address: 'Powai',
                age: 72
            }, {
                name: 'Larry Page',
                address: 'Powai',
                age: 42
            }, {
                name: 'Kevin george',
                address: 'Powai',
                age: 10
            }]
        }
    }
}).filter('ageFilter', function () {
    return function (input, minAge) {
        return input.filter(function (person) {
            return person.age >= +minAge;
        });
    }
});