重复代码 

  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. 王立平--split字符串切割

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQyNTUyNw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  2. oracle实现查询每个部门的员工工资排在前三的员工的基本信息具体举例

    --先删除原先存在的表: drop table emp; --创建表emp create table emp ( deptno number, ename varchar2(20), sal numb ...

  3. UVA 4683 - Find The Number

    uva 4683 这题的意思是给一个集合,最多有12个元素. 找出仅仅能被集合中一个仅且一个数整除的第n个数. (n <= 10^15). 我用容斥原理做的.先把能被每一个数整除的元素个数累加, ...

  4. Codeforces 558B Amr and The Large Array

    B. Amr and The Large Array time limit per test 1 second memory limit per test 256 megabytes input st ...

  5. 【MySQL】MySQL删除匿名用户，保证登录安全

    博客地址已迁往 www.virtclouds.com 原文地址 http://www.virtclouds.com/538.html 很多MySQL程序都会带有匿名登录的功能. 在刚刚安装完MySQL ...

  6. 2015.05.05,外语,读书笔记-《Word Power Made Easy》 15 “如何谈论事情进展” SESSION 42

    HOW TO TALK ABOUT WHAT GOES ON TEASER PREVIEW 一些以-ate结束的动词,通常表示: to exhaust([ig'zɔ:st] n. 排气,排气装置 v. ...

  7. nyoj--118--修路方案（次小生成树）

    修路方案 时间限制:3000 ms  |  内存限制:65535 KB 难度:5 描述 南将军率领着许多部队,它们分别驻扎在N个不同的城市里,这些城市分别编号1~N,由于交通不太便利,南将军准备修路. ...

  8. 2017-3-5 leetcode 442 531 533

    今天莫名其妙睡到了中午,很难受... leetcode442 https://leetcode.com/problems/find-all-duplicates-in-an-array/?tab=De ...

  9. crawler4j图片爬虫

    该实例主要演示下如何爬取指定网站的图片: 代码中有详细注释: 首先写一个ImageCrawler类: package com.demo.imageCrawler4j; import java.io.F ...

  10. DateTime? 定义的日期变量如何format

    DateTime? dateTime; dateTime.Value.ToString("yy-MM-dd")