ANGULARJS Study Notes (Fri)

ANGULARJS bidirectional data binding Ng-model and Ng-bind directives

These two instructions are the most important instructions for implementing bidirectional data binding, with the following differences:

Ng-bind has one-way data binding ($scope–> view). It has a shortcut {{val}} which displays the scope value $scope. val inserted into HTML where Val is a variable name.

Ng-model is intended to being put inside of form elements and has two-way data binding ($scope–> View a nd view–> $scope) e.g.

In summary, Ng-bind implements a one-way data binding, and we can bind a data item in a span tag so that the value of this data item is always displayed in this span tag.

and Ng-model generally to achieve two-way data binding, generally used in the form input, such as input tag, we can not only display the value of the data item in input box, can also be input to modify the value of the data item.

Instance:

< Label  class  = "col-md-2 Control-label"   e-mail: </label ;  <div  class  = "col-md-10" ;  <input  type  = "email"  class  = "Form-control"  placeholder  = "recommended 126 mailboxes"  ng-model  = "Userinfo.email" ;  </div ;   

Toggle Label Styles Dynamically

Html

 <div ng-controller="Cssctrl"><p Class= "text-      {{color}}  > test CSS style </p><button class="btn Btn-default " ng-click=" Setgreen () "> green </button> </div>     

Js

var myCSSModule = angular.module(‘MyCSSModule‘, []);myCSSModule.controller(‘CSSCtrl‘, [‘$scope‘,    function($scope) {        $scope"red";        $scopefunction() {            $scope"green";        }    }])

Here the controller defines the variable color in the $scope, and the function Setgreen,
In HTML we use {{color}} to dynamically extract the value of the data model.
After using the Setgreen function, the color,html class of the data we have modified in the background will also be updated dynamically.

Ng-show and Ng-hide

Html

<div ng-controller=' Deathraymenucontroller '>    <button ng-click=' Togglemenu () '>Toggle Menu</button>    <ul ng-show=' menustate.show '>        <li ng-click=' stun () '>Stun</li>        <li ng-click=' disintegrate () '>Disintegrate</li>        <li ng-click=' erase () '>Erase from the history</li>    </ul><div/>

Js

var myCSSModule = angular.module(‘MyCSSModule‘, []);myCSSModule.controller(‘DeathrayMenuController‘, [‘$scope‘,    function($scope) {        $scope.menuState={show:false};        $scopefunction() {            $scope.menuState.show = !$scope.menuState.show;        };    }])

In this example, you can learn the Ng-show command, followed by a variable that is a true or false value, based on the value of true and false to determine whether the label needs to be displayed.

The realization of toggle () is that each time the opposite $scope.menustate can be achieved

Ng-class

Css

.error{    background-color: red;}.warning{    background-color: yellow;}

Html

 <div ng-controller=' Headercontroller '><div  Ng-class=' {error:iserror, warning:iswarning} '>     {{messagetext}} </div><button ng-click=' ShowError () '> Simulate Error</button><button ng-click=' showwarning () '>simulate Warning</button></div>         

Js

varMycssmodule = Angular.module (' Mycssmodule ', []); Mycssmodule.controller (' Headercontroller ', [' $scope ', function($scope) {        $scope. IsError =false;$scope. iswarning =false;$scope. ShowError = function() {            $scope. MessageText =' This was an error! ';$scope. IsError =true;$scope. iswarning =false; };$scope. showwarning = function() {            $scope. MessageText =' Just a warning. Carry on. ';$scope. iswarning =true;$scope. IsError =false;    }; }])

The key in this example is the Ng-class command:

ng-class=‘{error: isError, warning: isWarning}‘

We can dynamically add a classname to the label by using the controller's IsError and iswarning two variables.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

ANGULARJS Study Notes (Fri)