AngularJS----数据绑定和表达式

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

表达式的形式：

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

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

2）变量（重要）：{{aaa}}

3）函数(重要)：{{fn()}}

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

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

模型声明的几种形式：

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);

})

AngularJS-02 数据绑定和表达式的更多相关文章

  1. 10分钟学会AngularJS的数据绑定

     前言:为什么要用AngularJS?  相信用过.NetMVC的人都知道用rezor绑定数据是一件很爽的事情,C#代码直接在前台页面中输出.然后这种比较适用于同步请求.   当我们的项目离不开异步请 ...

  2. AngularJS双向数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. AngularJS开发指南：表达式

    ---恢复内容开始--- 表达式是类似Javascript的代码片段,通常在绑定中用到,写在双大括号中如{{表达式}}.表达式是用$parse方法来处理的. 下面是一些合法的AngularJS表达式 ...

  4. Delphi XE2 之 FireMonkey 入门(29) - 数据绑定: TBindingsList: 表达式的 Evaluate() 方法

    Delphi XE2 之 FireMonkey 入门(29) - 数据绑定: TBindingsList: 表达式的 Evaluate() 方法 TBindingsList 中可能不止一个表达式, 通 ...

  5. Delphi XE2 之 FireMonkey 入门(28) - 数据绑定: TBindingsList: 表达式函数测试: SelectedText()、CheckedState()

    Delphi XE2 之 FireMonkey 入门(28) - 数据绑定: TBindingsList: 表达式函数测试: SelectedText().CheckedState() 示例构想: 用 ...

  6. Delphi XE2 之 FireMonkey 入门(25) - 数据绑定: TBindingsList: 表达式的灵活性及表达式函数

    Delphi XE2 之 FireMonkey 入门(25) - 数据绑定: TBindingsList: 表达式的灵活性及表达式函数 绑定表达式中可以有简单的运算和字符串连接, 但字符串需放在双引号 ...

  7. 02、AngularJs的数据绑定

    我们知道,AngularJs中的数据绑定是双向绑定的,View的改变,会改变Model,Model的改变也会改变View中的值,废话不多说,我们直接上代码. <!DOCTYPE html> ...

  8. angularjs学习总结一(表达式、指令、模型)

    一:自执行匿名函数 (function(){ /*code*/})();自执行匿名函数:常见格式:(function() { /* code */ })();解释:包围函数(function(){}) ...

  9. 关于AngularJs，数据绑定与自定义验证

    最近开始着手学起了Angular,抱着好奇的心情开始研究了起来.忽然发现angular可以巧妙而方便的进行数据的绑定验证啊什么的.(当然,我只是刚开始学,所有可能有更强大的功能,只是我还没有看到) 那 ...

随机推荐

  1. code review 20190705

    命名规范: 做了什么? 目的是什么? 在什么基础上进行? 注释说明 sql update,where 先行????? 警告: 清空所有警告:所有隐藏比较深入的bug,都是由警告带来的 + 忽略警告 枚 ...

  2. k8s管理机密信息（9）

    一.启动应用安全信息的保护: Secret介绍: 应用启动过程中可能需要一些敏感信息,比如访问数据库的用户名密码或者秘钥.将这些信息直接保存在容器镜像中显然不妥,Kubernetes 提供的解决方案是 ...

  3. JAVA 基础编程练习题41 【程序 41 猴子分桃】

    41 [程序 41 猴子分桃] 题目:海滩上有一堆桃子,五只猴子来分.第一只猴子把这堆桃子凭据分为五份,多了一个,这只猴子把 多的一个扔入海中,拿走了一份.第二只猴子把剩下的桃子又平均分成五份,又多了 ...

  4. MLN 讨论 —— inference

    We consider two types of inference: finding the most likely state of the world consistent with some ...

  5. C4model实践总结

    能看到这篇文章的人,我就不用废话给你介绍C4model.vscode.plantuml这些是什么以及怎么安装了. 0. 基本语法. 1. 创建常用模板.并保存到snippet. 2.利用关系REL控制 ...

  6. 【ARM-Linux开发】在win下开发的eclipse+yougatoo+jlink环境搭建

    在win下开发的eclipse+yougatoo+jlink环境搭建 一 工具的安装 第一步:安装gcc编译工具 yagarto-bu-2.21_gcc-4.6.2-c-C++_nl-1.19.0_g ...

  7. NOIP 2015：信息传递

    题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一 ...

  8. ActiveMQ单机部署及简单应用

    系统版本:Centos 7 前言 MQ是消息中间件,是一种在分布式系统中应用程序借以传递消息的媒介,常用的有ActiveMQ,RabbitMQ,kafka.ActiveMQ是Apache下的开源项目, ...

  9. odoo12安装指南

    声明:本指南默认已安装好Python3和pycharm及postgresql,odoo12的源码包 一. 1.在pycharm创建一个新的项目 建议创建在虚拟环境中 2.在pycharm的控制台下检验 ...

  10. JavaWeb开发常用的前端控件

    罗列的下述控件大多依赖jquery插件,故可提前导入jquery插件以免出错 Validform 提供对表单的验证.提交等功能,具体可查阅其官方文档>>>Validform 示例如下 ...