整理书籍内容（QQ:283125476 发布者：M 【重在分享，有建议请联系-》QQ号】）

ng-change 当文本输入字段中内容发生了变化，就会改变equation.x的值：

<body ng-app="myApp">

    <div ng-controller="TestController">

        <input type="text"

            ng-model="equation.x"

            ng-change="change()" />

        <code>{{ equation.output }}</code>

    </div>

    <script>

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

    app.controller("TestController", function($scope) {

        $scope.equation = {};

        $scope.change = function() {

            $scope.equation.output = parseInt($scope.equation.x) + 2;

        };

    });

    </script>

</body>
  • 表单合法时设置 ng-valid;
  • 表单不合法时设置 ng-invlid;
  • 表单未进行修改时设置 ng-pristion;
  • 表单进行过修改时设置 ng-dirty;

ng-cloak效果跟ng-bind差不多，就是为了防止闪烁

<body ng-app="myApp">

    <div ng-controller="TestController">

        <p ng-cloak>sss{{ aaa }}</p>

    </div>

    <script>

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

    app.controller("TestController", function($scope, $timeout) {

        //dosomething;

        $timeout(function() {

            $scope.aaa = "lll";

        }, 1000);

    });

    </script>

</body>

ng-click

<body ng-app="myApp">

    <div ng-controller="TestController">

        <button ng-click="count = count +1"

                ng-init="count = 9">increment</button>

        count: {{ count }};

        <button ng-click="decrement()">decrement</button>

    </div>

    <script>

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

    app.controller("TestController", function($scope) {

        //dosomething;

        $scope.decrement = function() {

            $scope.count = $scope.count - 1;

        };

    });

    </script>

</body>

ng-select

<body ng-app="myApp">

    <div ng-controller="TestController">

        <ul>

            <li ng-repeat="color in colors">

              Name: <input ng-model="color.name">

              [<a href ng-click="colors.splice($index, 1)">X</a>]

            </li>

            <li>

              [<a href ng-click="colors.push({})">add</a>]

            </li>

          </ul>

          <hr/>

          Color (null not allowed):

          <select ng-model="myColor" ng-options="color.name for color in colors"></select><br>

          Color (null allowed):

          <span  class="nullable">

            <select ng-model="myColor" ng-options="color.name for color in colors">

              <option value="">-- choose color --</option>

            </select>

          </span><br/>

          Color grouped by shade:

          <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">

          </select><br/>

          Select <a href ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</a>.<br>

          <hr/>

          Currently selected: {{ {selected_color:myColor} }}

          <div style="border:solid 1px black; height:20px"

               ng-style="{'background-color':myColor.name}">

          </div>

    </div>

    <script>

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

    app.controller("TestController", function($scope) {

        $scope.colors = [

              {name:'black', shade:'dark'},

              {name:'white', shade:'light'},

              {name:'red', shade:'dark'},

              {name:'blue', shade:'dark'},

              {name:'yellow', shade:'light'}

            ];

            $scope.myColor = $scope.colors[2];

    });

    </script>

</body>

ng-attr-(suffix)

当AngularJS编译DOM时会查找花括号{{ some expression }}内的表达式。这些表达式会被自动注册到$watch服务中

并更新到$disgest循环中，成为它的一部分：

有时候浏览器会对属性进行很苛刻的限制。SVG就是一个例子：

<svg>

   <circle cx="{{ cs }}"></sircle>

</svg>

运行上面的代码会抛出一个错误，指出我们有一个非法属性，可以用ng-attr-cs来解决这个问题，

注意，cx位于这个名称的尾部，在这个属性中，通过用来{{ }}写表达式，达到前面提到的目的：

<svg>

    <circle ng-attr-cx="{{ cx }}"></circle>

</svg>

AngularJS -- 代码实例的更多相关文章

  1. MATLAB的PLOT函数线型设置及横坐标为字符串的代码实例

    2.横坐标为字符串的代码实例 cell={‘PLS’,’SVM’,’RF’,’NNET’,’NB’,’PLR’,’C5.0′,’PDA’,’KNN’,’GLM’,’BCT’};%分类方法yData=[ ...

  2. web service上传参数代码实例

    web service上传参数代码实例 这次做的项目用到webservice比较多,最开始在网上看的参考dome,发现都不行,后来发现安卓4.0以后有很大的不同,在做传参时,有些东西需要注意: 第一, ...

  3. (转)combogrid的代码实例

    EasyUI中combogrid的代码实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. PHP生成迅雷、快车、旋风等软件的下载链接代码实例

    PHP生成迅雷.快车.旋风等软件的下载链接代码实例 <?php function Download() { $urlodd=explode('//',$_POST["url" ...

  5. Scala 深入浅出实战经典 第45讲： scala中context bounds代码实例

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  6. 关于JAVA中事件分发和监听机制实现的代码实例-绝对原创实用

    http://blog.csdn.net/5iasp/article/details/37054171 文章标题:关于JAVA中事件分发和监听机制实现的代码实例 文章地址: http://blog.c ...

  7. input文本框实现宽度自适应代码实例

    代码实例如下: <!DOCTYPE html> <html><head><meta charset="utf-8"><meta ...

  8. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  9. input文本框实现宽度自适应代码实例，input文本框

    本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <html> < ...

随机推荐

  1. GitHub 新手教程 七，Git GUI 新手教程（4），上传本地代码库到GitHub

    1,打开 GitGUI,单击我们之前克隆好的本地库: 2,按图示顺序点击按钮: 3,按图示顺序点击按钮,输入您的 Sign 信息: 4,按图示顺序点击按钮: 5,弹出新的窗口后,点击 “Push” 按 ...

  2. PHP 设计模式六大原则

    http://www.cnblogs.com/yujon/p/5536118.html 设计模式六大原则(1):单一职责原则 不要存在多于一个导致类变更的原因.通俗的说,即一个类只负责一项职责 设计模 ...

  3. java实验报告五

    一.实验内容 1．掌握Socket程序的编写: 2．掌握密码技术的使用: 3．设计安全传输系统. 二.实验基础: IP和端口:IP是用来标示计算机,而端口是用来标示某个计算机上面的特定应用.至于它们的 ...

  4. Alpha版本冲刺（十）

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

  5. Linux命令（一） pwd ，cd

    1.pwd命令 以绝对路径的方式显示当前所处的工作目录,从根目录 / 开始,每一级目录用 / 分隔.第一个 / 表示根目录,最后一个目录是当前目录.当不知道当前处于哪个目录的时候,使用 pwd 命令就 ...

  6. Linux命令（十五） 打包或解压文件 tar

    目录 1.命令简介 2.常用参数介绍 3.实例 4.直达底部 命令简介 tar 命令用于将文件打包或解压,扩展名一般为 ".tar" ,指定特定的参数可以调用 gzip 或 bzi ...

  7. Android Manifest文件

    Manifest文件内容 1.自定义权限(Permission) :  <permission android:description="string resource" a ...

  8. WP-PostViews使用

    1.在后台安装次插件 2.获取多少天之内的访问排名最高的记录 2.1 添加相应方法代码到wp-postviews.php文件中,据体代码可以网上找(本人自己可以在自己本机的例子查看到),这里只是记录大 ...

  9. 洛谷P2114 [NOI2014]起床困难综合症

    P2114 [NOI2014]起床困难综合症 题目描述 21世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm一直坚持与起床困难综合症作 ...

  10. Java重写toString和泛型的使用

    一.在一个类中重写toString方法 public class Person { private String name; private int age; public Person() { } ...