angularJS（5）

一，数据循环：特别要注意作用域

使用ng-repeat指令。

<div ng-app="myApp" ng-controller="myCtrl">

    <ul>

        <li ng-repeat="x in names">{{x}}</li>

    </ul>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.names=["金角大王","银角大王","红孩儿"];

});

</script>

二：angularJs控制器

1.AngularJS 应用程序被控制器控制。
2.ng-controller 指令定义了应用程序控制器。

控制器使用方法：

<div ng-app="myapp" ng-controller="myctrl">

    姓：<input type="text" ng-model="xing"><br>

        名：<input type="text" ng-model="ming">

        <h1>你的姓名是：{{xing+""+ming}}</h1>

    <h2>好孩子：{{aaa()}}</h2>

</div>

<script>

    var app=angular.module("myapp",[]);

    app.controller("myctrl",function($scope){

         $scope.xing="孙";

         $scope.ming="悟空";

         $scope.aaa=function(){

            return $scope.xing+$scope.ming+“喜欢吃香蕉";

        }

    })

</script>

接下来咱来解析一下这个案例：

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
AngularJS 指令用于定义一个控制器:ng-controller="myctrl" 
myctrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (xing 和 ming)。
ng-model 指令绑定输入域到控制器的属性（xing 和 ming）.

三，DOM指令。

1，ng-disabled指令：直接绑定应用程序数据到HTML的disabled属性。

<body ng-app="myapp" ng-controller="mctrl">

        <input type="button" value="下一步" ng-disabled="!mm"/>

        <input type="checkbox" ng-model="mm"/>

    </body>

        <script type="text/javascript">

            var app=angular.module('myapp',[]);

            app.controller('mctrl',function ($scope) {});

        </script>

2，ng-hide指令（隐藏元素）

<body ng-app="myapp" ng-controller="myctrl">

        <input type="checkbox" ng-model="mm" />隐藏

        <div ng-hide="mm">

            <h4>八百标兵奔北坡</h4>

        </div>

    </body>

    <script type="text/javascript">

        var app=angular.module('myapp',[]);

        app.controller('myctrl',function ($scope) {})

    </script>

3，ng-show指令：根据value的值来显示（隐藏）HTML元素；可以使用表达式来计算布尔值（true或false）。

<body ng-app="myapp" ng-controller="myctrl">

        <input type="checkbox"  ng-model="mm"/>显示

        <div id="" ng-show="mm">

            <h2>窗前明月光</h2>

        </div>

    </body>

    <script type="text/javascript">

        var app=angular.module('myapp',[]);

        app.controller('myctrl',function ($scope) {})

    </script>

4,angularJs显示隐藏

（1）ng-hide 指令用于设置应用部分是否可见。
         ng-hide="true" 设置 HTML 元素不可见。
         ng-hide=“false” 设置 HTML 元素可见。
（2）ng-show 指令可用于设置应用中的一部分是否可见 。
       ng-show="false" 可以设置 HTML 元素 不可见。 
       ng-show="true" 可以以设置  HTML 元素可见。

转

angularJS（5）的更多相关文章

  1. angularJS（6）

    angularJS(6) 一:angularJs的事件. 1.ng-click指令定义了AngularJS点击事件. <div ng-app="myapp" ng-contr ...

  2. angularJS（4）

    angularJS(4) 一:angulaJs的作用域scope Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带.scope 是一个 JavaScr ...

  3. angularJS（3）

      angularJS(3) 一.angularJs的指令模型ng-model指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. 为应用程序数据提供类型验证(number.email ...

  4. angularJS（2）

    angularJS(2) 今天先讲一个angularJs的表单绑定实例: <div ng-app="myApp" ng-controller="formCtrl&q ...

  5. AngularJS（1）

    AngularJS(1) 在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优 ...

  6. 学习笔记-AngularJs（十）

    前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...

  7. 学习笔记-AngularJs（九）

    到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...

  8. 学习笔记-AngularJs（七）

    在学习笔记-AngularJs(六)提及了事件处理器和过滤器以及它们的例子,而我们知道之前我是使用$http服务去获得我们需要的json数据,但是$http是比较底层的用法,有时候我们想把获取json ...

  9. 学习笔记-AngularJs（六）

    在学习笔记-AngularJs(五),通过引入bootstrap.css进行改写整个样式,这时学习项目也变得好看多了,现在我们又需要目录再进行一次改变,如下图: 这样就符合之前讲的对学习目录进行布置了 ...

随机推荐

  1. Convert BSpline Curve to Arc Spline in OpenCASCADE

    Convert BSpline Curve to Arc Spline in OpenCASCADE eryar@163.com Abstract. The paper based on OpenCA ...

  2. jQuery学习之路（3）- 事件

    ▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在j ...

  3. JavaScript动画-磁性吸附

    ▓▓▓▓▓▓ 大致介绍 磁性吸附是以模拟拖拽为基础添加一个拖拽时范围的限定而来的一个效果,如果对模拟拖拽有疑问的同学请移步模拟拖拽. 源代码.效果:点这里 ▓▓▓▓▓▓ 范围限定(可视区) 先来看一个 ...

  4. 缓存工厂之Redis缓存

    这几天没有按照计划分享技术博文,主要是去医院了,这里一想到在医院经历的种种,我真的有话要说:医院里的医务人员曾经被吹捧为美丽+和蔼+可亲的天使,在经受5天左右相互接触后不得不让感慨:遇见的有些人员在挂 ...

  5. SDWebImage源码解读 之 SDWebImageCompat

    第三篇 前言 本篇主要解读SDWebImage的配置文件.正如compat的定义,该配置文件主要是兼容Apple的其他设备.也许我们真实的开发平台只有一个,但考虑各个平台的兼容性,对于框架有着很重要的 ...

  6. Struts2实现ajax的两种方式

    基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件. js部分调用方式是一样的: JS代码: function testAjax() { var ...

  7. 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频

    目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...

  8. Hadoop学习之旅二：HDFS

    本文基于Hadoop1.X 概述 分布式文件系统主要用来解决如下几个问题: 读写大文件 加速运算 对于某些体积巨大的文件,比如其大小超过了计算机文件系统所能存放的最大限制或者是其大小甚至超过了计算机整 ...

  9. 前端开发：面向对象与javascript中的面向对象实现（二）构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  10. Android Socket连接PC出错问题及解决

    最近测试问题:Android 通过Socket链接电脑,ip和端口都是正确的,也在同一网段,可android端就是报异常如下: 解决办法:测试电脑的防火墙可能开着,在控制面板把防火墙打开即可.