重复代码 

  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. CF43A Football

    CF43A Football 题意翻译 题目大意 两只足球队比赛,现给你进球情况,问哪支队伍赢了. 第一行一个整数nn (1\leq n\leq 1001≤n≤100 ),表示有nn 次进球,接下来n ...

  2. Grace Hopper 葛丽丝 霍普

    Grace Murray Hopper(1906-1992), COBOL之母, Debug之母, A ship in port is safe, but that is not what ships ...

  3. POJ 1236 Network of Schools 强连通图

    Description A number of schools are connected to a computer network. Agreements have been developed ...

  4. U盘安装 CentOS 64bit （dell c6100, CentOS6.3, 64bit）

    在淘宝买了一个server,dell c6100,64bit, 曾经系统是black apple.近期又买了一块企业级硬盘打算装CentOS. 综合各方面原因决定安装6.3版本号. 我參考了http: ...

  5. insmod: error inserting &#39;hello.ko&#39;: -1 Invalid module format

    在学习编写linux驱动程序的时候,一般都是从写一个helloworld的模块開始. 可是在编译完毕后,进行模块载入的时候,有时会出现例如以下错误: insmod: error inserting ' ...

  6. c3---scanf

    #include <stdio.h> int main(int argc, const char * argv[]) { // 要求: 存储用户输入的整数 // 1.用户输入的整数确定吗? ...

  7. angularjs1--动画

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  8. Javascript中的with用法

    1.看例子 <script language="javascript"> function Lakers() { this.name = "kobe brya ...

  9. spark 随机森林算法案例实战

    随机森林算法 由多个决策树构成的森林,算法分类结果由这些决策树投票得到,决策树在生成的过程当中分别在行方向和列方向上添加随机过程,行方向上构建决策树时采用放回抽样(bootstraping)得到训练数 ...

  10. ASP.NET Core-组件：目录

    ylbtech-ASP.NET Core-组件:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http ...