AngularJS-数据绑定和表达式

表达式和数据绑定

表达式是AngularJS模板引擎的重要内容，也是视图View的必要组成部分，用来将模型动态转换为可视DOM元素或者其内容。

表达式的形式：

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

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

1. 变量（重要）：{{aaa}}
2. 函数(重要)：{{fn()}}
3. 表达式：{{a+b}},{{a&&b}},{{true?1:2}}

      注意：条件语句不能在表达式中使用（如：if(){}else{},switch,while(){}）

变量声明：

1. $scope.abc = ‘abc’;
2. ng-init=”” 不推荐：model和view之间产生耦合
3. ng-model 双向数据绑定

数据绑定

 将模型Model和视图View关联起来，双方的改变都能影响到对方。

数据绑定类型：

1. 单向数据绑定：模型能够影响视图，反之则不行
   1. 简写形式：{{abc}}
   2. 指令形式：
      1. ng-bind:是简写形式的替代，最佳实践是在首页使用ng-bind，其他页面使用简写形式。
      2. ng-checked:常用于radio和checkbox类型的表单元素
      3. ng-class:指令允许你动态设置HTML元素的CSS类，通过绑定到一个包含要添加的所有类的表达式
      4. ng-hide/ng-show:是否显示/隐藏HTML元素
      5. ng-if:也能控制元素隐藏和显示，但是是删除或添加dom而非隐藏
      6. ng-readonly=”xx”:是否只读
      7. ng-selected:是否选择，主要用于select下拉列表
      8. ng-src：用于设置img元素图片url
      9. ng-value：设置输入框的值
      10. ng-style:动态设置样式
2. 双向数据绑定：模型和视图可以相互影响
   1. ng-model=”xx”

绑定表达式可以使用$watch的方式来监控

$scope.$watch(‘expression’,function(newValue,oldValue){....})

expression：带有Angular 表达式或者函数的字符串，它会返回被监控的数据模型的当前值。

function(newValue,oldValue)：一个函数function(newValue,oldValue){},当watchFn 发生变化时会被调用

优点：可以动态构造监视的表达式，这是写在view中的表带不能实现的。

代码实例

  
  
  
  




    

        
        
一、双向数据绑定，可以影响myClass的值，当其发生改变时，样式也跟着变化
        
请选一种喜欢的颜色：red(红)、yellow(黄)、blue(蓝)、green(绿)
        输入喜欢的颜色： 
        
        
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate iure dignissimos molestias laudantium voluptate ratione culpa consequuntur in accusantium dolorem fugit, consequatur exercitationem numquam laboriosam ad recusandae rerum dolor ipsa.
    
    

        
        
二、ng-show的使用
        ng-isShow决定元素是否显示Div
        
三、ng-hide的使用
        ng-isHide决定元素是否隐藏Div
        
四、ng-if的使用
        ng-if决定元素显示与否，这里的显示是添加到dom树中，如果不显示则是从dom树中删除相关元素
    
    

        
        
五、单向数据绑定和双向数据绑定结合实现表格项目的全选
        
        全选
        
        小明
        
        小红
        
        小飞
    
    

        
        
六、购物车商品小计列表
        

            

            
单价
            
数量
            
小计
            
            

            

                
            
            

                
            
            
{{price1*count1}}
            
            

            

                
            
            

                
            
            

                {{price2*count2}}
            
            
            

            

                
            
            

                
            
            
{{price3*count3}}
            
            

            

                总计：{{total}}
            
            
        
    

/**
 * 使用angular.module()创建应用程序模块
 * 第一个参数是模块名称
 * 第二个参数是依赖模块的数组
 */
var app = angular.module('myApp',[]);
//定义控制器myController
//第一个参数是控制器名称
//第二个参数是控制器具体定义，务必添加$scope(作用域对象)
app.controller('myController', function ($scope) {
    //声明myClass，用于测试ng-class的使用
    $scope.myClass = 'red';
    //创建变量isShow，和元素显示或隐藏挂钩
    $scope.isShow = true;
    //创建变量isHide，和元素显示或隐藏挂钩
    $scope.isHide = false;
    //创建变量isShowByNgIf，和元素添加或删除挂钩
    $scope.isShowByNgIf = true;
});
//定义控制器myController2，测试控制器的嵌套
app.controller('myController2', function ($scope) {
    $scope.price1 = 10;
    $scope.count1 = 1;
    $scope.price2 = 20;
    $scope.count2 = 2;
    $scope.price3 = 30;
    $scope.count3 = 1;
    //总价
    $scope.total = 0;
    //通过$watch方式监控价格总计的计算
    //第一个参数：设置已声明对象
    //第二个参数：设置回调函数
    $scope.$watch('price1*count1+price2*count2+price3*count3', function (newVal, oldVal) {
        //值发生了变化，总价作相应的处理
        $scope.total = $scope.price1*$scope.count1+$scope.price2*$scope.count2+$scope.price3*$scope.count3;
    })
})

显示效果：