重复代码 

  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-org.dom4j常用api介绍

    //导入必要的包 import org.dom4j.Document;//Document文档类 import org.dom4j.Element//元素节点类 import org.dom4j.QN ...

  2. [SharePoint][SharePoint Designer 入门经典]Chapter11 工作流基础

    1.SPS中可以创建的工作流的种类 2.SPD工作流基础 3.创建列表\库工作流 4.创建可重用的工作流 5.利用基于站点的工作流 6.SPD 工作流的限制和注意事项

  3. Cocos2d-x碰撞检測

    假设不适用Box2D物理引擎.那么要进行Cocos2d-x的碰撞检測那我们的方法往往就是进行"矩形和点"."矩形和矩形"这样粗略的碰撞检測.我们一般採取开启sc ...

  4. winform显示系统托盘，双击图片图表显示窗体，退出窗体是否提示

    private void Form1_FormClosing(object sender, FormClosingEventArgs e) { DialogResult result = Messag ...

  5. hdoj--2803--The MAX（水题）

    The MAX Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  6. PHP substr() 函数截取中文字符串乱码

    用PHP substr() 函数截取中文字符串乱码,换PHPmb_substr() 函数即可

  7. PHP 上传文件到其他服务器

    PHP 上传文件到其他服务器 标签(空格分隔): 安装Guzzle类库 **guzzle** 是发送网络请求的类库 composer安装:**composer require guzzlehttp/g ...

  8. String or binary data would be truncated 异常解决办法 .

    原因:一般出现这个问题是因为数据库中的某个字段的长度小,而插入数据大解决:修改表结构,使表字段大小相同或大于要插入的数据

  9. AlertDialog的使用

    1.Alertdialog的几种形式: 2.第一种:简单对话框 AlertDialog.Builder localBuilder = new AlertDialog.Builder(this); lo ...

  10. hdu 5375 Gray code 【 dp 】

    dp[i][j]表示第i位取j的时候取得的最大的分数 然后分s[i]是不是问号,s[i-1]是不是问号这大的四种情况讨论 #include<cstdio> #include<cstr ...