AngularJS学习（三）模板

princejingyun 2013-01-30

JSP也算个模板吧，不过是服务端的。

<!DOCTYPE html>
<html ng-app><!-- 必须 -->
    <title>AngularJS学习（三）模板</title>
    <meta charset="utf-8">
    <!-- 引入angularJS -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src="03-1.js"></script>
    <!-- ng-controller指令指定了一个控制器,见03-1.js中的定义,这个控制器的作用范围(域)即在这个div内 -->
    <div ng-controller="PhoneListCtrl">
        <!-- 这里phones定义在PhoneListCtrl内,即$scope.phones -->
        <p>手机总数:{{ phones.length }}</p>
        <ul>
            <!-- ng-repeat指令 用于循环 -->
            <li ng-repeat="phone in phones"> 
                {{ $index + 1 }}<!-- $index 用于获取循环的当前索引 -->
                {{ phone.name }}
                <p>{{ phone.snippet }}</p>
            </li>
        </ul>
        <hr>
        <!-- ng-init指令 用于初始化一个值 -->
        <div ng-init="friends = {'adam':10, 'amalie':12}">
            <p>对象:{{ friends }}</p>
            <ul>
                <!-- ng-repeat指令 另一种循环方式 -->
                <ol ng-repeat="(key,val) in friends"> 
                    {{ '第' + ($index + 1) + '属性为:' + key + ',它的值是:' + val}}<!-- $index 这种方式下依旧可用 -->
                </ol>
            </ul>
        <div>
    </div>
</html>

03-1.js:

var PhoneListCtrl = function($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
  ];
}

在线示例 

princejingyun

princejingyun

相关推荐

angularjs中directive指令与component组件有什么区别？

我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件，当然directive也能实现组件这点毋庸置疑。在了解完两者后，即便我们知道component就像删减版的directive，用法上大同小异，但两者在

xingdongfang / 0评论 2019-11-10

AngularJs 指令directive之transclude

transclude - 编译元素的内容，使它能够被directive所用。需要配合ngTransclude使用(引用)

zhenghao / 0评论 2014-05-30

AngularJs 指令directive之require

controller的用法分为两种情形，一种是require自定义的controller，由于自定义controller中的属性方法都由自己编 写，使用起来比较简单；另一种方法则是require AngularJS内建的指令，其中大部分时间需要requir

youyouzouzou / 0评论 2014-05-30

AngularJs 指令directive之controller，link，compile

关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过你可千万不要用 ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。lin

zbwroom / 0评论 2014-05-30

angularjs 依赖注入

如果你的应用包含多个模块，注意在添加模块时添加其它模块的引用。例如，一个应用包含三个模块app、controls、和data ：。给出一个注入器可以通过检查声明来获取函数名，从而知道需要的依赖的函数。在上面的例子中，$scope和greeter是需要注入到

zbwroom / 0评论 2014-05-29

angularjs中判断ng-repeat是否迭代完的实例

angular中的ng-repeat指令会自动迭代数组然后你就可以将这些迭代的数据在页面逐条显示。但是怎样才知道数据迭代完了，其实还是有方法的，今天就介绍一种方法来判断ng-repeat是否已经迭代完。众所周知ng-repeat会为每一个repeat的对象

鸟菜小端前 / 0评论 2018-09-12

angularjs 指令渲染完成后执行某个方法

请求远程数据--》数据模型变化--》angularjs监控到模型变化--》重新渲染页面。需要执行accordion 方法才能显示出来。页面在加载完后台数据，生成userModel.menuList数据，angularjs 监控到userModel.menu

lizean / 0评论 2015-03-10

angularJs 之form提交

使用一个按钮元件与NG点击属性。在这两种情况下，一个JavaScript函数调用对象的范围。JavaScript函数将数据从形式到你的服务器，通过AJAX。

zbwroom / 0评论 2015-04-10

AngularJs接收HTML使用

angular js的强大之处之一就是他的数据双向绑定功能----->ng-bind和针对form的ng-model. 该方法将值转换为特权所接受并能安全地使用“ng-bind-html”

Oranq / 0评论 2015-08-29

angularjs的scope深层理解

每个指令都可以用scope来声明一个独立作用域，如：那么我们可以通过$scope.$parent来获取父层作用域。也可以在里面加各种参数来达到与父级的scope作关联。其实也不是技术，只是指令用到循环中$index时的技巧然后延伸到指令scope的再次深入

CrazyDogWang / 0评论 2016-01-06

AngularJS应用的解析[笔记]

您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。一旦模型状态发生改变，AngularJS会立即刷新反映在视图

lizean / 0评论 2016-04-30

requireJs和angularJs集成

2首先，我们需要main.js文件，RequireJS将会加载这份文件，然后这份文件将会触发加工其他所有依赖的东西。这个文件定义了AngularJS应用，并且告诉它去依赖我们所定义的所有控制器、服务、过滤器及指令。//当DOM结构加载完成后，bootstr

小新正在敲代码 / 0评论 2016-04-14

AngularJS常用插件与指令收集

使用AngularJS有差不多一年时间了，前前后后也用了不少库和指令，整理了一下，分成四大类列出。有demo地址的，就直接连接到demo地址，其它的直接链到github托管库中。angular-maxonry图片墙效果插件，可以将图片组织成类似于瀑布流的效

CrazyDogWang / 0评论 2016-11-30

Angularjs

Angularjs说白了就是对js的进一步封装。长期以springmvc框架做后台的开发人员知道，它的开发模式非常的明了，MVC。像springmvc一样，angularjs也有注入的概念。Angularjs的指令可以说非常的强大，可以简化我们很多的不必要

lizean / 0评论 2016-12-19

angularJs之如何获取input的焦点（自定义指令）

<!DOCTYPE html>. var app = angular.module('myApp',[]);$scope.isCome = false;$scope.isFocus = false;$scope.isFocus = true;$

princejingyun / 0评论 2016-12-14

angularjs 控制器

控制器在Angularjs中的作用是增强视图，它实际就是一个函数，用来向视图中的作用域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。当我们在页面上创建一个控制器时，Angularjs会生成并传递一个$scope给这个控制器，由于An

youyouzouzou / 0评论 2017-02-24

AngularJs 表单

ngModel指令实现了双向的数据绑定，即模型和视图双向同步，同时它也为其他指令提供了API来扩展ngModel的行为。通过上述样式体现出来，user的name和email属性对应的控件加上了required属性, 当用户未输入name和email信息时会

youyouzouzou / 0评论 2017-05-30

AngularJs 模块

我们可以把angular中的模块想象成应用组件的容器,这些组件包括控制器,服务,过滤器,指令等.通过“Hello World”实例来理解模块的工作原理。在js中我们通过dulemoAPI中的module定义一个模块，并在其中添加greet过滤器。modul

Oranq / 0评论 2017-05-30

AngularJS——简单表单验证

　　客户端表单验证是AngularJS里面最酷的功能之一，AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在这里，我们将谈谈几个最流行指令，然后我们将讨论如何编写自定义的验证。　　所有输入字段可以进行一些基本的验

Oranq / 0评论 2017-09-09

深究AngularJS—如何获取input的焦点（自定义指令）

　　关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求。ng-focus是一个事件，跟原生JS的onfocus是一样的，当我们点击input框时，就会

lizean / 0评论 2017-09-06

深究AngularJS——监听模型$watch

　　1.$watch是scope内置的函数，它的作用是用来监听数据的变化。它会返回被监听数据的当前值。如果是函数形多，则会接收到F的新旧两个值和作用域对象，示例：。　　为true时：将会检查监听对象的每个属性是否发生变化。

拓宇 / 0评论 2017-09-06

AngularJS 多指令Scope问题的解决

不确定度指令，传入参量类别，然后该指令列出该类别下的所有不确定度。新增页面用到了三个该指令，只有最后一个成功，前两个都没有数据。前两个都是空，最后一个数组有值。想不明白，这里明明监听参量类别，并将scope的accuracyList设置了值啊？尝试打印一下

itseebin / 0评论 2018-10-25

angularJS自定义directive之带参方法传递详解

<button style="width: 10%;height: 15%;color: black;" ng-click="sendEmail">提交</button>. <my-em

老卫的技术站 / 0评论 2018-10-09

swiper在angularjs中使用循环轮播失效的解决方法

通过查询了资料，发现swiper和angularjs执行的机制是不同的，swiper的机制是：初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块，则允许滑动多少个块。而在angular始终在swiper初始化之后定义，

学而思之 / 0评论 2018-09-27

AngularJS 作用域与数据绑定机制

与同为 MVC 框架的 Dojo 的定位不同，AngularJS 在功能上更加轻量，而相比于 jQuery，AngularJS 又帮您省去了许多机械的绑定工作。在一些对开发速度要求高，功能模块不需要太丰富的非企业级 WEB 应用上，AngularJS 是一

拓宇 / 0评论 2016-04-19

angularJS学习资源

AngularJS是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，其通过使用指令结构来扩展HTML词汇，使开发者可以使用HTML来声明动态 内容，从而使得Web开发和测试工作变得更加容易。AngularJS诞生

夏小球 / 0评论 2014-11-27

angularjs自定义指令函数传参

问题描述在编写导入指令的时候，需要将函数绑定到指令中，并传入一个参数。<button ng-hide="importing" class="btn btn-warning btn-sm" type="

kkkder / 0评论 2019-06-29

angularjs 学期下拉列表指令

但学长说这样写不好，代码冗余，就帮我重新写了一种。这样一来就能少绑定一个对象给指令，并且还能少写一个监听。总结这周在前台遇到了困难，主要是滥用监听和回调，导致代码非常冗余繁琐，设计得不够简洁清晰，总是把简单的问题想复杂。

zhenghao / 0评论 2019-06-28

AngularJS 多指令 Scope 问题

问题描述不确定度指令，传入参量类别，然后该指令列出该类别下的所有不确定度。新增页面用到了三个该指令，只有最后一个成功，前两个都没有数据。

thesameguo / 0评论 2019-06-28

AngularJS ng-show 指令

AngularJS 实例<divng-app=""ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓为 <spanng-bin

zbwroom / 0评论 2017-09-26

AngularJS——简单表单验证

客户端表单验证是AngularJS里面最酷的功能之一，AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在这里，我们将谈谈几个最流行指令，然后我们将讨论如何编写自定义的验证。所有输入字段可以进行一些基本的验证，例如

拓宇 / 0评论 2017-09-09

Angularjs自定义指令实现三级联动选择地理位置

"country" : scope.country == null || scope.country == '' ?"province" : scope.province == null || scope.provi

youyouzouzou / 0评论 2017-09-09

深究AngularJS—如何获取input的焦点（自定义指令）

关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求。ng-focus是一个事件，跟原生JS的onfocus是一样的，当我们点击input框时，就会触发

Oranq / 0评论 2017-09-06

深究AngularJS——监听模型$watch

它会返回被监听数据的当前值。如果是函数形多，则会接收到F的新旧两个值和作用域对象，示例：。}, true);为true时：将会检查监听对象的每个属性是否发生变化。

lizean / 0评论 2017-09-06

【AngularJS 介绍】

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签

princejingyun / 0评论 2017-07-30

angularjs directive 指令 学习笔记之scope作用域（二）

Scope 是创建可以复用指令的必要条件，每个指令都有其唯一的作用域，它不依赖于父scope。scope 对象定义names 和types 变量。上面的例子即创建了3个scope变量。指令可以使用该值但无法修改，是最常用的变量。指令检索主Scope中的引用

Oranq / 0评论 2017-03-22

angularjs 控制器

控制器在Angularjs中的作用是增强视图，它实际就是一个函数，用来向视图中的作用域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。当我们在页面上创建一个控制器时，Angularjs会生成并传递一个$scope给这个控制器，由于An

CrazyDogWang / 0评论 2017-02-24

AngularJs中ng-repeat指令的默认animate动画

但是没想出来时为什么，开始以为数据或数组操作出问题，搞了很长时间没搞明白。结果一步一步删代码发现问题出在引入的animate包身上。原来ng-repeat指令在引入animate的情况下自动调用ng-enter,ng-leave等class。$animat

CrazyDogWang / 0评论 2017-02-14

Angularjs

Angularjs说白了就是对js的进一步封装。长期以springmvc框架做后台的开发人员知道，它的开发模式非常的明了，MVC。像springmvc一样，angularjs也有注入的概念。Angularjs的指令可以说非常的强大，可以简化我们很多的不必要

zhenghao / 0评论 2016-12-19

angularJs之如何获取input的焦点（自定义指令）

<!DOCTYPE html>. var app = angular.module('myApp',[]);$scope.isCome = false;$scope.isFocus = false;$scope.isFocus = true;$

CrazyDogWang / 0评论 2016-12-14

AngularJS常用插件与指令收集

使用AngularJS有差不多一年时间了，前前后后也用了不少库和指令，整理了一下，分成四大类列出。有demo地址的，就直接连接到demo地址，其它的直接链到github托管库中。angular-once的解决方案是，对于不涉及到修改的数据，不要使用双向绑定

zhenghao / 0评论 2016-11-30

AngularJS 文件上传

问题描述附件上传检定结果以附件形式上传。这里先不考虑api。插件介绍用到了项目映入过的一个插件，angular-file-upload。插件很简单，就是一个指令，我们在它提供给我们的指令中声明一个uploader对象，这个对象表示在不同的时间下要执行什么操

kkkder / 0评论 2019-06-28

angularjs的基本功能介绍

带你走近AngularJS - 基本功能介绍带你走近AngularJS - 体验指令实例带你走近AngularJS - 创建自定义指令-------------------------------------------------------------

Oranq / 0评论 2016-11-14

AngularJs 基础教程​ —— Select(选择框)

本文为H5EDU机构官方HTML5培训教程，主要介绍：AngularJs基础教程——Select(选择框). AngularJS可以使用数组或对象创建一个下拉列表选项。ng-repeat指令是通过数组来循环HTML代码来创建下拉列表，但ng-options

zbwroom / 0评论 2016-09-23

AngularJs 基础教程 —— 控制器

AngularJS控制器控制AngularJS应用程序的数据。ng-controller指令定义了应用程序控制器。控制器是JavaScript对象，由标准的JavaScript对象的构造函数创建。应用程序在<div>内运行。ng-control

CrazyDogWang / 0评论 2016-09-21

AngularJS基础

AngularJS是一个JavaScript框架。AngularJS通过指令扩展了HTML，且通过表达式绑定数据到HTML。当HTML页面加载完成之后，运行AngularJS的解析代码，将HTML页面中的AngularJS相关的标签或字段进行解析，解析后生

wolaoreme / 0评论 2016-09-17

angularjs结合jquery等js插件 双向绑定不生效解决办法

这个时候最常见的问题就是: 使用插件进行赋值后，angularjs进行的双向绑定不生效，js修改了表单值却不在model中更新 。。[一脸懵逼]。。出现问题自然首先想到的肯定是检查代码无误，然后确定是日期插件修改了input的表单值但是未触发Angular

zbwroom / 0评论 2016-09-14

JavaScript强化教程——AngularJS 指令

AngularJS通过被称为指令的新属性来扩展HTML。AngularJS通过内置的指令来为应用添加功能。AngularJS允许你自定义指令。ng-app指令初始化一个AngularJS应用程序。完整的指令内容可以参阅AngularJS参考手册。ng-ap

CrazyDogWang / 0评论 2016-07-22

angularjs学习3

我们知道，CSS写在不同的地方有不同的优先级，.css文件中的定义<元素style中的属性，但是如果使用!important，事情就会变得不一样。important限定的定义却是优先级最高的，无论是在ie6-10或者Firefox和Chrome表现都

aSuncat / 0评论 2016-06-17

angularjs学习2

所有的内置指令的前缀都为ng，不建议自定义指令使用该前缀，以免冲突。先列出一些关键的内置指令，顺便简单说说作用域的问题。将表单控件和当前作用域的属性进行绑定，这么解释似乎也不太正确。该指令被调用时会初始化内部作用域。每一次用AngularJS都离不开这个指

Oranq / 0评论 2016-06-15