<!DOCTYPE html>

 <html>

 <head lang="en">

   <meta charset="UTF-8">

   <title></title>

 </head>

 <!--

 1. Angular指令

     * Angular为HTML页面扩展的: 自定义标签属性或标签

     * 与Angular的作用域对象(scope)交互,扩展页面的动态表现力

 2. 常用指令(一)

   * ng-app: 指定模块名，angular管理的区域

   * ng-model： 双向绑定，输入相关标签

   * ng-init： 初始化数据

   * ng-click： 调用作用域对象的方法（点击时）

   * ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）

   * ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）

   * ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域

     * $index, $first, $last, $middle, $odd, $even

   * ng-show: 布尔类型， 如果为true才显示

   * ng-hide: 布尔类型， 如果为true就隐藏

 -->

 <body ng-app="myApp">

 <!--创建作用域对象MyCtrl -->

 <div ng-controller="MyCtrl" ng-init="age=12">

   <div>

     <h2>价格计算器(自动)</h2>

     数量：<input type="number" ng-model="count1">

     价格：<input type="number" ng-model="price1">

     <p>总计：{{count1 * price1}}</p>

   </div>

   <div>

     <h2>价格计算器(点击按钮显示计算结果)</h2>

     数量：<input type="number" ng-model="count2">

     价格：<input type="number" ng-model="price2">

     <button ng-click="getTotalPrice()">计算</button>

     <p>总计：{{totalPrice}}</p>

   </div>

   <!--

   * ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域

       * $index 下标，从0开始, $first, $last, $middle除了收尾，其他属于middle, $odd, $even

   -->

   <h3>人员信息列表</h3>

   <ul>

     <!--ng-repeat="person in persons"  person是循环变量，接收每次循环时得到的一个person对象-->

     <li ng-repeat="person in persons">

       偶数行：{{$even}},奇数行{{$odd}},中间的：{{$middle}},最后一个：{{$last}},第一个：{{$first}},第{{$index +

       1}}个，{{person.name}}----{{person.age}}

     </li>

   </ul>

   <!--ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}） -->

   <!--当使用ng-bind的时候表达式不在生效-->

   <p ng-bind="123">：{{'asdfdsfds'}}</p>

   <p>{{count2}}</p>

   <!--ng-show: 布尔类型， 如果为true才显示; ng-hide: 布尔类型， 如果为true就隐藏 -->

   <button ng-click="switch()">切换</button>

   <p ng-show="isLike">我喜欢贾静雯-isLike(ng-show)值为：{{isLike}}</p>

   <p ng-hide="isLike">贾静雯喜欢我-isLike(ng-show)值为：{{isLike}}</p>

 </div>

 <script type='text/javascript' src='../../js/angular-1.5.5/angular.js'></script>

 <script type='text/javascript'>

   /*

    *  * ng-app: 指定模块名，angular管理的区域

    * ng-model： 双向绑定，输入相关标签

    * ng-init： 初始化数据

    * ng-click： 调用作用域对象的方法（点击时）

    * ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）

    * */

   //创建模块对象

   angular.module('myApp', [])

     .controller('MyCtrl', ['$scope', function ($scope) {

       $scope.count1 = 1;

       $scope.price1 = 20;

       $scope.count2 = 2;

       $scope.price2 = 30;

       $scope.totalPrice = $scope.count2 * $scope.price2; //页面初始化时要显示的值

       $scope.getTotalPrice = function () {

         $scope.totalPrice = this.count2 * this.price2; //更改后计算新值

       };

       $scope.persons = [

         {name: 'kobe', age: 39},

         {name: 'anverson', age: 41},

         {name: 'weide', age: 38},

         {name: 'tim', age: 40},

         {name: 'curry', age: 29}

       ];

       $scope.isLike = true;

       $scope.switch = function () {

         $scope.isLike = !$scope.isLike;

       }

     }])

 </script>

 </body>

 </html>

Angular JS - 6 - Angular JS 常用指令的更多相关文章

  1. Vue专题-js常用指令

    vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍了vue.js的常用指令. vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML ...

  2. Angular JS从入门基础 mvc三层架构 常用指令

    Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  3. Angular JS - 7 - Angular JS 常用指令2

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. vue.js介绍，常用指令，事件，以及制作简易留言版

    一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...

  5. 1.Vue.js的常用指令

      Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...

  6. Vue.js入门及其常用指令

    一.Vue框架 https://cn.vuejs.org/ 官网 前端领域有三大框架 Angular诞生于2009年,是由谷歌公司创建出来的框架: React诞生于2013年,是由facebook公司 ...

  7. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  8. 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

    Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...

  9. 【转】Angular.js VS. Ember.js：谁将成为Web开发的新宠？

    本文源自于Quora网站的一个问题,作者称最近一直在为一个新的Rails项目寻找一个JavaScript框架,通过筛选,最终纠结于 Angular.js和 Ember.js. 这个问题获得了大量的关注 ...

随机推荐

  1. vue2.0 之 douban （六）axios的简单使用

    由于项目中用到了豆瓣api,涉及到跨域访问,就需要在config的index.js添加代理,例如 proxyTable: { // 设置代理,解决跨域问题 '/api': { target: 'htt ...

  2. ceph-性能调优

    Ceph 参数性能调优https://blog.csdn.net/changtao381/article/details/49907115这篇文章对我的环境有较大帮助 ceph优化记录 ceph.co ...

  3. DR 项目小结

    前言 个人的项目总结, 非技术类博文. 需要补充的知识点 HTTP 协议与其内置方法 curl 指令和各选项的意义 Keystone 认证流程和各项目配置文件 [keystone_authtoken] ...

  4. 死锁（Deadlock）

    死锁:是指是指两个或两个以上的进程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁,这些永远在互相等待的进程称为死锁进程. ...

  5. Minimum Cost 【POJ - 2516】【网络流最小费用最大流】

    题目链接 题意: 有N个商家它们需要货物源,还有M个货物供应商,N个商家需要K种物品,每种物品都有对应的需求量,M个商家每种物品都是对应的存货,然后再是K个N*M的矩阵表示了K个物品从供货商运送到商家 ...

  6. 【linux】 mail/mutt 发送邮件

    mail: 比较常用,缺点是发送附件要同时安装其他软件: mutt:功能强大,注意发送html需要升级到1.5+版本:   用mail发送邮件: echo "邮件正文" | mai ...

  7. Python 根据入栈顺利判定出栈顺序

    1.读取入栈,出栈数据: 2.把数据分别转化成整数列表: 3.新建栈列表,用入栈数据进行压栈:如果栈列表不为空,并且栈顶层数据为出栈的元素:删除栈列表的顶层数据: 4.如果栈列表不为空,说明栈列表里面 ...

  8. svg画圆环

    之前我已经分享了一篇css画圆环,为啥今天还要分享一篇svg画圆环呢? 原因是:css画圆环在部分ipone手机会有bug,最大张角为90°,所以圆环会有白色的间隙. 好了,开始代码展示: html: ...

  9. 连接tomcat时，输入telnet localhost 8080后无法再次输入

    初次接触服务器时,一般会在本地建立一个微型服务器,今天在使用Apache的tomcat时,为了在命令行下访问服务器中webapps下的自定义资源:首先打开命令行窗口,然后输入telnet localh ...

  10. JVM（8）之 Stop The World

    开发十年,就只剩下这套架构体系了! >>>   小伙伴还记得上一篇中我们留下的一个问题吗?什么是停顿类型!经过前几章的学习,我们知道垃圾回收首先是要经过标记的.对象被标记后就会根据不 ...