AngularJS - Directives

by Amanda Williamson

HTML

<div ng-app="myApp"> 
    <em>ng-model</em><br/>
    <input type="text" ng-model="name" />
     <p>Hello {{name}}!</p>
     <em>ng-checked</em>
    <div>Check me to check both:
        <input type="checkbox" ng-model="master" />
        <br/>
        <input id="checkSlave" type="checkbox" ng-checked="master" />
    </div> 
    <em>ng-selected</em><br/>
    Check me to select: <input type="checkbox" ng-model="selected"><br/>
    <select>
      <option>Hello!</option>
      <option id="greet" ng-selected="selected">Greetings!</option>
    </select><br/><br/>
    <em>ng-init & ng-keypress & ng-mouseenter/ng-mouseleave</em><br/><br/>
    <div><input ng-keypress="countKP = countKP + 1" ng-init="countKP=0" />
        key press count: {{countKP}}</div><br/>
    <button ng-mouseenter="countME = countME + 1" ng-init="countME=0">
        Increment (when mouse enters)</button>count: {{countME}}  <br/><br/>
    <button ng-mouseleave="countML = countML + 1" ng-init="countML=0">
        Increment (when mouse leaves)</button>count: {{countML}}  <br/><br/>
    <em>ng-style</em><br/>
    <input type="button" value="set color" ng-click="myStyle={color:'red'}">
    <input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
    <input type="button" value="clear" ng-click="myStyle={}">
   <br/><br/>
    <span ng-style="myStyle">Sample Text</span><br/><br/>
    <em>ng-class</em>
    <div ng-controller="MyCtrl">
        <p ng-repeat="person in teamAvatar" class="{{person.element}}">
            {{person.name}} is a {{person.element}} bender</p> 
        <em>ng-class & ng-click & ng-dblclick</em>
        <p ng-class="testClass" ng-click="clickAnimate()" ng-dblclick="dblClickAnimate()">click me!!!</p>
        <em>ng-show/ng-hide</em><br/><br/>
        <button ng-click="toggle()">toggle</button> 
        <span ng-hide="visible">The button toggles the visibility of this span</span>        
    </div>
</div>

CSS

.water {
    color: lightblue;
}
.fire {
    color: crimson;
}
.earth {
    color: lightgreen;
}
.air {
    color: palegoldenrod;
}
.non {
    color: gray;
}
.small {
    color: plum;
    margin: 10px;
    -webkit-transition:all cubic-bezier(0.940, 0.450, 0.460, 0.250) 0.5s;
    transition:all cubic-bezier(0.940, 0.450, 0.460, 0.250) 0.5s;
}
.big {
    color: purple;
    margin: 10px;
    font-size: 3em;
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

JavaScript

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

myApp.controller('MyCtrl', ['$scope', MyCtrl]);

function MyCtrl($scope) {

    $scope.teamAvatar = [{
        name: "Aang",
        element: "air"
    }, {
        name: "Katara",
        element: "water"
    }, {
        name: "Sokka",
        element: "non"
    }, {
        name: "Toph",
        element: "earth"
    }, {
        name: "Zuko",
        element: "fire"
    }];

    $scope.testClass = 'small';

    $scope.clickAnimate = function ClickAnimate() {
        $scope.testClass = 'big';
    };

    $scope.dblClickAnimate = function DblClickAnimate() {
        $scope.testClass = 'small';
    };

    $scope.visible = false;
    $scope.toggle = function toggle() {
        $scope.visible = !$scope.visible;
    }

}