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. 异步任务队列Celery在Django中的使用

    前段时间在Django Web平台开发中,碰到一些请求执行的任务时间较长(几分钟),为了加快用户的响应时间,因此决定采用异步任务的方式在后台执行这些任务.在同事的指引下接触了Celery这个异步任务队 ...

  2. Java基础Map接口+Collections工具类

    1.Map中我们主要讲两个接口 HashMap  与   LinkedHashMap (1)其中LinkedHashMap是有序的  怎么存怎么取出来 我们讲一下Map的增删改查功能: /* * Ma ...

  3. VisualStudio2013 如何打开之前版本开发的（.vdproj ）安装项目

    当你的项目使用早于 visualstudio2013 的版本开发并且使用 Visual Studio Installer 制作安装项目时,在升级至 VS2013 后会发现新安装项目无法打开, VS20 ...

  4. Could not create SSL connection through proxy serve-svn

    RA layer request failedsvn: Unable to connect to a repository at URL xxxxxx 最后:Could not create SSL ...

  5. CodeSimth - .Net Framework Data Provider 可能没有安装。解决方法

    今天想使用CodeSimth生成一个sqlite数据库的模板.当添加添加数据库的时候发现: .Net Framework Data Provider 可能没有安装. 下面找到官方的文档说明: SQLi ...

  6. 和 Thrift 的一场美丽邂逅

    一. 与 Thrift 的初识 也许大多数人接触 Thrift 是从序列化开始的.每次搜索 “java序列化” + “方式”.“对比” 或 “性能” 等关键字时,搜索引擎总是会返回一大堆有关各种序列化 ...

  7. 带你实现开发者头条APP(三) 首页实现

    title: 带你实现开发者头条APP(三) 首页实现 tags: 轮播广告,ViewPager切换,圆形图片 grammar_cjkRuby: true --- 一.前言 今天实现开发者头条APP的 ...

  8. MVC CodeFirst简单的创建数据库（非常详细的步骤）

       最近在学习MVC的开发,相信有过开发经验的人初学一个新的框架时候的想法跟我一样最关心的就是这个框架如何架构,每个架构如何分工,以及最最关键的就是如何与数据库通信,再下来才是学习基础的页面设计啊等 ...

  9. 【知识必备】一文让你搞懂design设计的CoordinatorLayout和AppbarLayout联动，让Design设计更简单~

    一.写在前面 其实博主在之前已经对design包的各个控件都做了博文说明,无奈个人觉得理解不够深入,所以有了这篇更加深入的介绍,希望各位看官拍砖~ 二.从是什么开始 1.首先我们得知道Coordina ...

  10. VS2015使用scanf报错的解决方案

    1.在程序最前面加: #define _CRT_SECURE_NO_DEPRECATE 2.在程序最前面加: #pragma warning(disable:4996) 3.把scanf改为scanf ...