JSAngular-06

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="name in names |filter:search">{{name}}</li>
        </ul>
        <div>
            <label>Detailed search:</label><input type="text" ng-model="detailedSearch">
        </div>
        <ul>
            <li ng-repeat="person in people |filter:detailedSearch">{{person.name}} : {{person.age}}</li>
        </ul>
    </div>
    
    <script>
        var List = function($scope){
            $scope.names = ["Tom","Jeffrey","Dan","David","Peter"];
            $scope.people = [{name:"Tom",age:20},{name:"Jeffrey",age:25},{name:"Dan",age:30},{name:"Peter",age:17}];
        };
    </script>
</html>

CSS

* {
        box-sizing: border-box;
    }
    body{
        font: 16px/1.5 sans-serif;
        color: #222;
        margin: 5em;
    }