Angular Basics

by Dan Shahin

HTML

<!-- ng-app directive will usually be on body element -->
<div id="app" ng-app ng-init="people=[{name:'fred',age:31},{name:'barney',age:29},{name:'wilma',age:22},{name:'betty',age:21},{name:'gazoo',age:1200}]; foo='bar'">
    <label>filter</label>
    <input type="text" ng-model="searchText" id="filter" />{{searchText | uppercase }}
    <div class="person" ng-repeat="person in people | filter:searchText | orderBy:'age'">{{person.name}} - {{person.age}} {{foo}}</div>
</div>

CSS

#app {
    margin:5px;
}
div.person {
    /*transition*/
    -webkit-transition:background-color 0.5s ease, padding 0.1s linear;
    -moz-transition:background-color 0.5s ease, padding 0.1s linear;
    -o-transition:background-color 0.5s ease, padding 0.1s linear;
    transition:background-color 0.5s ease, padding 0.1s linear;
    padding:5px;
    margin-top:2px;
    background-color:#00B25C;
    font-family:Arial;
}
div.person:hover {
    background-color:#FF4100;
    cursor:pointer;
    padding:10px;
}