重复代码 

  1. <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
    2. 

  2.   <p>使用 ng-repeat 来循环数组</p>
    3. 

  3.   <ul>
    4. 

  4.     <li ng-repeat="x in names">
    5. 

  5.       {{ x }}
    6. 

  6.     </li>
    7. 

  7.   </ul>
    8. 

  8. <div>


自定义代码段
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
  1. <runoob-directive></runoob-directive>
    2. 

  2. <div runoob-directive></div>
    3. 

  3. <script>
    4. 

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

  5. app.directive("runoobDirective", function() {
    6. 

  6.     return {
    7. 

  7.         template : "<h1>自定义指令!</h1>"
    8. 

  8.     };
    9. 

  9. });
    10. 

  10. </script>

通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:
  1. var app = angular.module("myApp", []);
    2. 

  2. app.directive("runoobDirective", function() {
    3. 

  3.     return {
    4. 

  4.         restrict : "A",   // 这个是个关键
    5. 

  5.         template : "<h1>自定义指令!</h1>"
    6. 

  6.     };
    7. 

  7. });

restrict 值可以是以下几种:

  • E 只限元素名使用
  • A 只限属性使用
  • C 只限类名使用
  • M 只限注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。


通过访问angularjs的属性实现双向绑定
  1. <div ng-app="myApp" ng-controller="myCtrl">
    2. 

  2.     名字: <input ng-model="name">
    3. 

  3.     <h1>你输入了: {{name}}</h1>
    4. 

  4. </div>
通过np-module可以将输入域的值与angularjs创建的变量绑定
  1. <div ng-app="myApp" ng-controller="myCtrl">
    2. 

  2.     名字: <input ng-model="name">
    3. 

  3. </div>
    4. 

    5. 

  5. <script>
    6. 

  6. var app = angular.module('myApp', []);
    7. 

  7. app.controller('myCtrl', function($scope) {
    8. 

  8.     $scope.name = "John Doe";
    9. 

  9. });
    10. 

  10. </script>

ng-show的用法
ng-show属性返回true的情况下显示
  1. <form ng-app="" name="myForm">
    2. 

  2.     Email:
    3. 

  3.     <input type="email" name="myAddress" ng-model="text">
    4. 

  4.     <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
    5. 

  5. </form>


ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):
  1. <form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
    2. 

  2.     Email:
    3. 

  3.     <input type="email" name="myAddress" ng-model="myText" required></p>
    4. 

  4.     <h1>状态</h1>
    5. 

  5.     {{myForm.myAddress.$valid}}
    6. 

  6.     {{myForm.myAddress.$dirty}}
    7. 

  7.     {{myForm.myAddress.$touched}}
    8. 

  8. </form>

和CSS配合使用
注意只有被ng-model标记的才能在css中使用
  1. <style>
    2. 

  2. input.ng-invalid {
    3. 

  3.     background-color: lightblue;
    4. 

  4. }
    5. 

  5. </style>
    6. 

  6. <body>
    7. 

    8. 

  8. <form ng-app="" name="myForm">
    9. 

  9.     输入你的名字:
    10. 

  10.     <input name="email" ng-model="text" required>
    11. 

  11. </form>



angular-代码段的更多相关文章

  1. AngularJS中页面呈现html代码段

    如何在页面呈现一段html代码段呢? 在textarea中我们这样写: <textarea name="" id="" cols="30&quo ...

  2. angularjs中向html页面添加内容节点元素代码段的两种方法

    第一种方式:原生JS向html页面添加内容节点元素代码段: <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. 读 Angular 代码风格指南

    读 Angular 代码风格指南 本文写于 2021 年 1 月 17 日 原文地址:Angular 文档 该文章拥有完整的代码风格指南--大到如何编排文件夹,小到如何进行变量命名都涉及.但是与 ng ...

  4. WPF自定义RoutedEvent事件代码段

    今天在写东西的时候,发现常用的代码段里没有RoutedEvent的,因此,写了一个代码段,方便以后使用,顺便记录一下,如何做代码段. 1.在项目中新建一个XML文件,将扩展名修改为snippet. 2 ...

  5. JavaScript代码段整理笔记系列（二）

    上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey ...

  6. 我们为什么要看《超实用的Node.JS代码段》

    不知道自己Node.JS水平如何?看这张图 如果一半以上的你都不会,必须看这本书,一线工程师用代码和功能页面来告诉你每一个技巧点. 都会一点,但不知道如何检验自己,看看本书提供的面试题: 1.     ...

  7. 《超实用的JavaScript代码段》—— 读后总结

    这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. ...

  8. Visual Studio常用小技巧一：代码段+快捷键+插件=效率

    用了visual studio 5年多,也该给自己做下备忘录了.每次进新的组换新的电脑,安装自己熟悉的环境又得重新配置,不做些备忘老会忘记一些东西.工具用的好,效率自然翻倍. 1,代码段 在Visua ...

  9. 使用eclipse开发Morphline的Java代码段

    背景:morphline是一个轻量级的etl工具.除了提供标准化的方法之外,还可以定制化的开发java片段.定制化的java片段会在加载时被作为一个独立的类编译,对源数据作处理. morphline关 ...

  10. 前端福利！10个短小却超实用的JavaScript 代码段

    JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...

随机推荐

  1. lpa标签传播算法解说及代码实现

    package lpa; import java.util.Arrays; import java.util.HashMap; import java.util.Map; public class L ...

  2. ARP协议(3)ARP编程--winpcap&amp;vs2012配置

    好.之前说了那么多.最终到了,我们能够操刀的时候了. 在对ARP协议编程前.我们必需要能控制网络适配器(网卡).这个部分就是驱动! "我们要编写网卡驱动?",对,可是,至少我们现阶 ...

  3. Dynamics CRM2013 6.1.1.1143版本号插件注冊器的一个bug

    近期在做的项目客户用的是CRM2013sp1版本号,所以插件注冊器使用的也是与之相应的6.1.1.1143,悲剧的事情也因此而開始. 在插件中注冊step时,工具里有个run in user's co ...

  4. Window7幻灯片字体显示混乱，难道真的是病毒么

    这个问题有几天了.就是在其它人的PowerPoint2010做的ppt文件.发到这台有问题的电脑上(PowerPoint2007)就会显示全然不一样.例如以下所看到的. watermark/2/tex ...

  5. Java推断文本文件编码格式以及读取

    假设不是约定好的,要想解析txt文件就须要知道文件编码类型,因为文件编码类型众多.比如UTF-8,GBK.UTF-16,GB2312等等. 事实上有简单的办法.仅仅须要这样就能够了 String fi ...

  6. 【转】如何在Mac 终端升级ruby版本

    原文网址:https://segmentfault.com/a/1190000003784636 rvm是什么?为什么要安装rvm呢,因为rvm可以让你拥有多个版本的Ruby,并且可以在多个版本之间自 ...

  7. HTML5学习笔记（四）：关于表格

    在一个实例中碰到表格,总结下,先上代码,例: <table border="1"> <thead> <th>表头</th> < ...

  8. 个人作业—Alpha项目测试

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...

  9. 在APP开发设计中，为什么APP开发公司要慎用左右横滑设计？

    移动端屏幕越来越大,但用户对内容量的要求也水涨船高.如何在有限的屏幕内透出更多的内容,是设计师们研究的重点. 常用的内容拓展设计有:Y 方向 List 滑动.Z 方向 3D Touch .入口式内容折 ...

  10. poj 3160 Father Christmas flymouse【强连通 DAG spfa 】

    和上一道题一样,可以用DAG上的动态规划来做,也可以建立一个源点,用spfa来做 #include<cstdio> #include<cstring> #include< ...