angularJS1笔记-(8)-内置指令
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.colorStyle {
color: #3e8f3e;
}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
<p>{{1+1}}</p>
<p ng-bind="1+1">2</p>
<p ng-bind-template="{{1+1}}"></p>
<ul ng-init="cityArr = ['上海','北京','广州','深圳']" ng-class="{colorStyle:status}"><!--初始化指令-->
<li ng-repeat="city in cityArr">
<span>当前元素:{{$index}}{{city}}</span>
<span>是否为头元素:{{$first}}</span>
<span>是否为非头非尾元素:{{$middle}}</span>
<span>是否为尾元素:{{$last}}</span>
</li>
</ul>
<!--加载另一个页面的指令-->
<div ng-include="'other.html'"> </div>
<div ng-include src="'other.html'"> </div> <button ng-click="changeStatus($event)">切换状态</button>
<p>{{status}}</p> <!--内置节点指令-->
<div ng-style="{'color':'red','margin-top':'20px'}">
你好
</div>
<div ng-style="defaultStyle">
你好吗
</div> <!--监听status属性的值-->
<ul ng-switch on="status">
<li ng-switch-when="true">
true
</li>
<li ng-switch-when="false">
false
</li>
</ul> <img src="{{src}}"/>
<img ng-src="{{src}}"/>
</div>
</div> <script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
<script type="text/javascript" src="app/index.js"></script> <script>
</script> </body>
</html>
other.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HI</title>
</head>
<body>
另一个页面
</body>
</html>
index.js:
var myApp = angular.module('myApp', [])
.controller('firstController',function ($scope) {
$scope.status = false;
$scope.changeStatus = function (event) {
console.log(event.target);
$scope.status = !$scope.status;
//angular.element把angular元素转换为jquery元素
angular.element(event.target).html('切换状态'+$scope.status);
}
$scope.defaultStyle = {
color:'red',
'margin-top':'50px'
}
$scope.src = "http://www.angularjs.org/img/AngularJS-large.png";
})
运行结果：
angularJS1笔记-(8)-内置指令的更多相关文章
- AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令
1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...
- Vue.js 学习笔记 第5章 内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...
- AngularJS学习笔记（四）内置指令
说说指令 不得不赞叹,指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能.ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素 ...
- Angular内置指令（一）
要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突 目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...
- AngularJS内置指令
指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单 ...
- angularJS内置指令一览
基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hi ...
- Angular内置指令
记录一下工作中使用到的一些AngularJS内置指令 内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...
- Vue源码后记-其余内置指令（2）
-- 指令这个讲起来还有点复杂,先把html弄上来: <body> <div id='app'> <div v-if="vIfIter" v-bind ...
- Vue源码后记-其余内置指令（1）
把其余的内置指令也搞完吧,来一个全家桶. 案例如下: <body> <div id='app'> <div v-if="vIfIter" v-bind ...
随机推荐
- 用NI的数据采集卡实现简单电子测试之5——压控振荡器的测试
本文从本人的163博客搬迁至此. 为了展示连续信号采集的方法,以其外部触发采集功能.我用运算放大器实现了一个最简单的低频压控振荡器(VCO),作为USB-6009采集的信号源.在LabVIEW下编写的 ...
- Android ListView demo
创建一个空的 Activity 相对应的layout文件会自动创建: ?xml version="1.0" encoding="utf-8"?> < ...
- 2017-2018-1 20155239 《信息安全系统设计基础》第五周学习总结+mybash的实现
2017-2018-1 20155239 <信息安全系统设计基础>第五周学习总结+mybash的实现 mybash的实现 使用fork,exec,wait实现mybash 写出伪代码,产品 ...
- WPF 自定义ComboBox样式，自定义多选控件
原文:WPF 自定义ComboBox样式,自定义多选控件 一.ComboBox基本样式 ComboBox有两种状态,可编辑和不可编辑状态.通过设置IsEditable属性可以切换控件状态. 先看基本样 ...
- matplotlib雷达图
用matplotlib画雷达图,网上流传的版本其实都是官网的一个例子.但是那个例子太复杂,而且它封装了几个类,让人难以一眼看出其本质. 我给出一个简单的解决方法,没有任何封装.作本文的原因,是为了回答 ...
- Install-Package:QRCoder已拥有为System.Drawing.Common定义的依赖项
error_log PM> Install-Package QRCoder -Version 1.3.3 Install-Package : "QRCoder"已拥有为&qu ...
- 【LG3722】[HNOI2017]影魔
[LG3722][HNOI2017]影魔 题面 洛谷 题解 先使用单调栈求出\(i\)左边第一个比\(i\)大的位置\(lp_i\),和右边第一个比\(i\)大的位置\(rp_i\). 考虑\(i\) ...
- shell 本地接口自动化
一.基于http/https的接口 一般情况下,当前大多公司在做接口自动化的时候都会使用一些工具:比如:postman/jmeter/python自研开发接口平台... 以上的情况,都是在源码与测试使 ...
- Charles工具内存不足时解决办法
Charles runs out of memory After recording for a while Charles will run low on available memory. To ...
- 关于Netty的学习前总结
摘要 前段时间一直在学习netty因为工作忙的原因没有写一个学习的总结,今天抽个空先把总结写了吧.事先声明,本文不会详细的介绍每一个部分不过每个部分都会附上讲解详细的url.本文只是为了解释通Nett ...