Basic Angularjs Demo

Basic Angularjs Demo

HTML

<div data-ng-app>
    <div data-ng-controller="SimpleController">
        <h3>Filtering and Sorting Data using "filter"</h3>
        Name:<br />
        <input type="text" data-ng-model="inputData.name" placeholder="name" />
        <br />
        City:<br />
        <input type="text" data-ng-model="inputData.city" placeholder="city" />
        <br />
        <button data-ng-click="addCustomer()">Add Customer</button>
        <br />
        <br />
    
        Filter by Name:
        <input type="text" data-ng-model="nameText" />
        <br />
    <ul>
        <li data-ng-repeat="customer in customers | filter:nameText | orderBy:'name'">{{ customer.name | uppercase }} - {{ customer.city }}</li>
    </ul>
  </div>
</div>

JavaScript

function SimpleController($scope) {
    $scope.customers = [
        { name: 'Dave Jones', city: 'Phoenix' },
        { name: 'Jamie Riley', city: 'Phoenix' },
        { name: 'Heedy Wahlin', city: 'Chandler' },
        { name: 'Thomas Winter', city: 'Seattle' }
    ];
    
    $scope.addCustomer = function () {
        $scope.customers.push({
            name: $scope.inputData.name,
            city: $scope.inputData.city
        });
    }
}

document.SimpleController = SimpleController;