JSAngular-07

by munir

HTML

<html ng-app>
    <div ng-controller="List">
        <div>
            <label>search:</label><input type="text" ng-model="search">
        </div>
        <ul>
            <li ng-repeat="person in people | filter:search">
                {{person.name}} : {{person.age}}
                <button ng-click="remove($index)">X</button>
                <span ng-show="$first">First</span>
                <span ng-show="$middle">Middle</span>
                <span ng-show="$last">Last</span>
            </li>
        </ul>
        <br><br>
            <span>There are {{people.length}}. people in the list</span>
        <div>
            <label>Name:</label><input ng-model="new_name">
            <br>
            <label>Age:</label><input type="number" ng-model="new_age">
            <br>
            <button ng-click="add()">Add</button>
        </div>
                
    </div>
    <script>
        var List = function($scope){
            $scope.people = [
                {name:"Tom",age:20},
                {name:"Jeffrey",age:25},
                {name:"Dan",age:30},
                {name:"Peter",age:17}
            ];
            $scope.add = function(){
                $scope.people.push({
                    name: $scope.new_name,
                    age: $scope.new_age
                });
                $scope.new_name = "";
                $scope.new_age = "";
            };
            $scope.remove = function(index){
                $scope.people.splice(index,1);
            }
        };
    </script>
</html>