重复代码 

  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. java 线程安全和不安全

    线程安全就是多线程访问时,采用了加锁机制,当一个线程访问该类的某个数据时,进行保护,其他线程不能进行访问直到该线程读取完,其他线程才可使用.不会出现数据不一致或者数据污染.(Vector,HashTa ...

  2. Maven错误-Missing artifact com.sun:tools:jar:1.5.0:system 解决方式

    1.Missing artifact com.sun:tools:jar:1.5.0:system Could not resolve dependencies for project com.ifl ...

  3. rails create方法ActiveModel::ForbiddenAttribute的问题

    rails create方法ActiveModel::ForbiddenAttribute的问题 def create @ad = Ad.new(ad_params) @ad.save end pri ...

  4. 移动端js手指滑动事件初体验

    今天在公司遇到做一个移动端手指滑动的效果,刚開始用了swiper.js插件发现效果不好(文字存在模糊效果).后来查了一些资料,自己手写了一个使用原生js写的滑动效果. 以下直接上代码: <!do ...

  5. hdu 2151

    就是一个dp,数组内存的步数, 数组没清空,wa了一次 #include<cstdio> #include<algorithm> #include<cstring> ...

  6. 常用的Linux 命令

    来源于面试 求一条linux命令:查找当前目录下所有含有字符串type="json",文件名以.xml的所有文件 find . -name "*.xml"|xa ...

  7. RecyclerView实现底部载入很多其它功能

    这两天在公司没有什么任务分配,就研究了下咱们Google在Android5.0 推出的一个用来取代ListView的列表控件----RecyclerView. 发现功能上确实比ListView强大了不 ...

  8. Android学习笔记（十二）——使用意图传递数据的几种方式

    使用意图传递数据的几种方式 点此获取完整代码 我们除了要从活动返回数据,也经常要传递数据给活动.对此我们能够使用Intent对象将这些数据传递给目标活动. 1.创建一个名为PassingData的项目 ...

  9. mysql_udf_http(根据mysql表自动触发发送http请求)

    下载 tar包wget http://mysql-udf-http.googlecode.com/files/mysql-udf-http-1.0.tar.gz解压tar -vzxf mysql-ud ...

  10. 调试相关blogs收集

    Debug Diag官方blog  https://blogs.msdn.microsoft.com/debugdiag/ Tess  https://blogs.msdn.microsoft.com ...