AngularJS-02 數據綁定和表達式

時間 2019-12-07

標籤 angularjs 數據綁定表達式欄目 AngularJS 简体版

原文原文鏈接

AngularJS----數據綁定和表達式javascript

1.表達式是AngularJS模板引擎的重要內容，也是視圖View的必要組成部分，用來將模型動態轉換爲可視DOM元素或者其內容。css

表達式的形式：html

1）常量：{{‘hello,world’}},{{123}},{{true}},{{[1,2,3,’aaa’]}}java

注意：使用常量的形式，不能使用對象{{{a:’aaa’}}}express

2）變量（重要）：{{aaa}}app

3）函數(重要)：{{fn()}}dom

4）表達式：{{a+b}},{{a&&b}},{{true?1:2}}ide

注意：條件語句不能在表達式中使用（如：if(){}else{},switch,while(){}）函數

模型聲明的幾種形式：ui

1）$scope.a = ‘hello,world’

2）ng-init=」a」 --不推薦：model和view之間產生耦合

3）ng-model -- 雙向數據綁定

代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="description" content="KunShan Online retailers ">
        <title></title>
        
        <link rel="stylesheet" href="css/angular-csp.css" />
    </head>
    <body ng-app="APP">
        
        <div ng-controller='myController' ng-init=" name='zq' ">
            <div>{{num}}</div>
            <button ng-click='add()'>add</button>
            
            <div>{{name}}</div>
            <button ng-click='add1()'>Say hello</button>
        </div>
        
        <div ng-controller='controller2' ng-init=" a=123;b='zq';c=false"><!--ng-init-->
            <h2>{{fn(a,b)}}</h2>
            <h3>{{c?'true11':'false22'}}</h3>
            <h4>{{a||b}}</h4>
        </div>
        
        <script type="text/javascript" src="js/angular.js" ></script>
        <script type="text/javascript" src="js/Angular02.js" ></script>
        
    </body>
</html>

var app = angular.module('APP',[]);//建立的模塊賦值給app對象


app.controller('myController',function($scope){

    $scope.num=123;//視圖中的num變量
    
    $scope.add=function(){//add方法 視圖中的add()
        $scope.num--;
    }
    
    $scope.add1=function(){
        $scope.name=$scope.name+'hello!';
    }
});


app.controller('controller2',function($scope){
    
    $scope.fn=function(a,b){
        return a+b;
    };
    
});

2.數據綁定

將模型Model和視圖View關聯起來，雙方的改變都能影響到對方。

數據綁定類型：

1）單向數據綁定：模型可以影響視圖，反之則不行

a) 簡寫形式：{{abc}}.

b) 指令形式：

i.ng-bind:是簡寫形式的替代，最佳實踐是在首頁使用ng-bind，其餘頁面使用簡寫形式。

ii.ng-checked:經常使用於radio和checkbox類型的表單元素。

iii.ng-class:指令容許你動態設置HTML元素的CSS類，經過綁定到一個包含要添加的全部類的表達式

iv.ng-hide/ng-show:是否顯示/隱藏HTML元素

v.ng-if:也能控制元素隱藏和顯示，可是是刪除或添加dom而非隱藏

vi.ng-readonly=」xx」:是否只讀

vii.ng-selected:是否選擇，主要用於select下拉列表

viii.ng-src：用於設置img元素圖片url

ix.ng-value：設置輸入框的值

x.ng-style:動態設置樣式

2）雙向數據綁定：模型和視圖能夠相互影響

a) ng-model=」xx」 --不須要在控制器中聲明，Angular會自動幫你聲明！

數據綁定示意圖

代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="description" content="KunShan Online retailers ">
        <title></title>
        
        <link rel="stylesheet" href="css/angular-csp.css" />
        <style>
            .red{ color: red;}
            .blue{color: blue;}
        </style>
    </head>
    <body>
        
        <div id="main" ng-app="APP">
            
            <div ng-controller='controller1'>
              
              <!--單向數據綁定-->
              <h1 ng-bind="a"></h1>
              <input type="radio" ng-checked="radioCheck" />
              <input type="checkbox" ng-checked="checkboxCheck" ng-change="show()" ng-model="ttt" />
              
              
              <!--雙向數據綁定-->
              <input type="text" ng-model="username" name="username" id="username" ng-change="usernameChange()" />
              <h1>{{username}}</h1>
              
              <!--單向數據綁定和雙向數據綁定，實現全選-->
              <table>
                  <tr><td>全選 <input type="checkbox" ng-model="allchecked" /> </td><td>姓名</td></tr>
                  <tr><td><input type="checkbox" ng-checked="allchecked" ng-model="cb1" /></td><td>22</td></tr>
                  <tr><td><input type="checkbox" ng-checked="allchecked" ng-model="cb2"/></td><td>33</td></tr>
                  <tr><td><input type="checkbox" ng-checked="allchecked" ng-model="cb3"/></td><td>44</td></tr>
              </table>
              <h3>{{cb1}}</h3>
              <h3>{{cb2}}</h3>
              <h3>{{cb3}}</h3>
              
              <!--ng-class-->
              <div>
                  <input type="checkbox" ng-model="classCheck" ng-change="classShow()" />
                  <span ng-class="myClass">2222222222222</span>
              </div>
              
            </div>
            
            
        </div>
        
        
        <script type="text/javascript" src="js/angular.js" ></script>
        <script type="text/javascript" src="js/Angular03.js" ></script>
        
    </body>
</html>

var app = angular.module('APP',[]);//建立的模塊賦值給app對象

app.controller('controller1',function($scope){
    
    //***
    $scope.a=222;
    
    $scope.radioCheck=true;
    $scope.checkboxCheck=false;
    
    
    $scope.show=function(){
        console.log($scope.checkboxCheck);
    };
    
    
    $scope.usernameChange=function(){
        console.log($scope.username);
    }
    
    $scope.allchecked=false;
    
    
    $scope.classCheck=false;
    $scope.myClass="red";
    
    $scope.classShow=function(){
        if($scope.classCheck){
            $scope.myClass="blue";
        }else{
            $scope.myClass="red";
        }
    }
});

3.綁定表達式能夠使用$watch的方式來監控

$scope.$watch(‘expression’,function(to,from){....})

優勢：能夠動態構造監視的表達式，這是寫在view中的錶帶不能實現的。

例子：

（$scope.$watch的第一個參數是要監聽的變量數據，回調函數裏邊的第一個參數是新數據，第二個參數是舊數據。若是監聽的變量數據是一個對象，那麼$scope.$watch還須要加入第三個參數true。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="KunShan Online retailers ">
    <title></title>
    <link rel="stylesheet" href="css/angular-csp.css" />

    <style type="text/css">
        .ng-cloak{display:none;}
    </style>

</head>
<body  ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">


<input type="text" ng-model="data1" />{{error1}}
<input type="text" ng-model="data2.title">{{error2}}




    <script type="text/javascript" src="js/angular.js" ></script>
    <script type="text/javascript" src="js/0121.js"></script>
</body>
</html>

var app = angular.module('app',[]);//建立的模塊賦值給app對象

app.controller('ctrl',function ($scope) {

    $scope.data1 = 'zym';
    $scope.$watch('data1', function(n, o){
        console.log(n);//to
        console.log(o);//from
        $scope.error1 = n.length>3 ? '最多3個字' : '';
    })

    $scope.data2 = {'title':'zym'};
    $scope.$watch('data2', function(n, o){
        console.log(n);
        $scope.error2 = n.title.length>3 ? '最多三個字' : '';
    }, true);


})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。