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

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

  1. <body ng-app="myApp">
  2.     <div ng-controller="TestController">
  3.         <input type="text"
  4.             ng-model="equation.x"
  5.             ng-change="change()" />
  6.         <code>{{ equation.output }}</code>
  7.     </div>
  9.     <script>
  10.     var app = angular.module("myApp", []);
  12.     app.controller("TestController", function($scope) {
  13.         $scope.equation = {};
  14.         $scope.change = function() {
  15.             $scope.equation.output = parseInt($scope.equation.x) + 2;
  16.         };
  17.     });
  18.     </script>
  19. </body>
  • 表单合法时设置 ng-valid;
  • 表单不合法时设置 ng-invlid;
  • 表单未进行修改时设置 ng-pristion;
  • 表单进行过修改时设置 ng-dirty;

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

  1. <body ng-app="myApp">
  2.     <div ng-controller="TestController">
  3.         <p ng-cloak>sss{{ aaa }}</p>
  4.     </div>
  6.     <script>
  7.     var app = angular.module("myApp", []); 
  9.     app.controller("TestController", function($scope, $timeout) {
  10.         //dosomething;
  11.         $timeout(function() {
  12.             $scope.aaa = "lll";
  13.         }, 1000);
  14.     });
  15.     </script>
  16. </body>

ng-click

  1. <body ng-app="myApp">
  2.     <div ng-controller="TestController">
  3.         <button ng-click="count = count +1"
  4.                 ng-init="count = 9">increment</button>
  6.         count: {{ count }};
  7.         <button ng-click="decrement()">decrement</button>
  8.     </div>
  10.     <script>
  11.     var app = angular.module("myApp", []); 
  13.     app.controller("TestController", function($scope) {
  14.         //dosomething;
  15.         $scope.decrement = function() {
  16.             $scope.count = $scope.count - 1;
  17.         };
  18.     });
  19.     </script>
  20. </body>

ng-select

  1. <body ng-app="myApp">
  2.     <div ng-controller="TestController">
  3.         <ul>
  4.             <li ng-repeat="color in colors">
  5.               Name: <input ng-model="color.name">
  6.               [<a href ng-click="colors.splice($index, 1)">X</a>]
  7.             </li>
  8.             <li>
  9.               [<a href ng-click="colors.push({})">add</a>]
  10.             </li>
  11.           </ul>
  12.           <hr/>
  13.           Color (null not allowed):
  14.           <select ng-model="myColor" ng-options="color.name for color in colors"></select><br>
  16.           Color (null allowed):
  17.           <span  class="nullable">
  18.             <select ng-model="myColor" ng-options="color.name for color in colors">
  19.               <option value="">-- choose color --</option>
  20.             </select>
  21.           </span><br/>
  23.           Color grouped by shade:
  24.           <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
  25.           </select><br/>
  27.           Select <a href ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</a>.<br>
  28.           <hr/>
  29.           Currently selected: {{ {selected_color:myColor} }}
  30.           <div style="border:solid 1px black; height:20px"
  31.                ng-style="{'background-color':myColor.name}">
  32.           </div>
  33.     </div>
  35.     <script>
  36.     var app = angular.module("myApp", []); 
  38.     app.controller("TestController", function($scope) {
  39.         $scope.colors = [
  40.               {name:'black', shade:'dark'},
  41.               {name:'white', shade:'light'},
  42.               {name:'red', shade:'dark'},
  43.               {name:'blue', shade:'dark'},
  44.               {name:'yellow', shade:'light'}
  45.             ];
  46.             $scope.myColor = $scope.colors[2];
  47.     });
  48.     </script>
  49. </body>

ng-attr-(suffix)

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

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

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

  1. <svg>
  2.    <circle cx="{{ cs }}"></sircle>
  3. </svg>

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

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

  1. <svg>
  2.     <circle ng-attr-cx="{{ cx }}"></circle>
  3. </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. Unity Dotween官方案例学习

    本文只涉及一些案例,具体查看 DoTween 官方文档. 一. Basics public class Basics : MonoBehaviour { public Transform redCub ...

  2. 科普贴 | 以太坊代币钱包MyEtherWallet使用教程，一步步教你玩转MEW

    MyEtherWallet 是一个以太坊的网页钱包,使用非常简单,打开网页就可以使用,源代码开源,不会在服务器上存储用户的钱包信息如私钥和密码.支持 Ledger Wallet.TREZOR 等硬件钱 ...

  3. fabric-sdk-container v1.0-beta 新增支持多服务节点

    HyperLedger/Fabric SDK Docker Image 该项目在github上的地址是:https://github.com/aberic/fabric-sdk-container ( ...

  4. 【Alpha】功能规格说明书

    更新说明:从用户需求分析中剥离有关用户场景分析部分,加入功能规格说明书. Github地址:https://github.com/buaase/Phylab-Web/blob/master/docs/ ...

  5. Day Five

    站立式会议 站立式会议内容总结 442 今天:编写具体计划的界面 遇到的问题:相对布局.绝对布局理解不够深刻 明天:完成设定计划时间的功能 331 今天:添加书籍/计划按钮,添加书籍时有一个文件选择 ...

  6. final 140字评论II

    1.约跑app: 从性能上讲,着重修改了其他组找出的bug,性能上有了很大的提高,增强了实用性. 从功能上讲,该app可以增加用户之间的互动性,有较多的客户群,适合人群不限于青少年和成年人. 从UI上 ...

  7. #Leetcode# 917. Reverse Only Letters

    https://leetcode.com/problems/reverse-only-letters/ Given a string S, return the "reversed" ...

  8. Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：0. 项目简介 & 成果展示

    本教程咪博士将带领大家学习创建自己的窗口部件 (widget).最终,我们完成的作品是一个简易的画板程序. 当用 kivy 创建应用时,我们需要仔细思考以下 3 个问题: 我们创建的应用需要处理什么数 ...

  9. Delphi实现DBGrid全选和反选功能

    Delphi实现Dbgrid全选和反选.清除全选的功能,不管是在Delphi下,还是在WEB开发中,这种功能都是很实用的,是进行数据批量操作的基础.本模块就是实现了为Delphi的DBGrid数据列表 ...

  10. maven项目无法读取src/main/java目录下的配置文件解决方法

    我们在用Mybatis去操作底层数据库的时候,需要用到xml配置文件,一般我们是把配置文件和dao放置在同一层目录.但是在用idea操作maven项目的时候,我们可能会遇到无法读取到dao对应的map ...