1.自定义指令,直接栗子:

note:定义指定是驼峰,2部分 前缀+作用,but  调用 改驼峰首字母大写处为 (-首字母小写)  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.js"></script>
</head>
<body ng-controller="ctl">
<div say-hello test-name="Hello World"></div>
<script>
var app=angular.module('myApp',['ng'])
    //自定义指令
app.directive('sayHello',function () {
return {
restrict:'EACM', /*可以作为 E element A attribute C class M comment*/
replace:true, //作为conmment使用
template:'<h2> Hello <Directive></Directive> {{testName}}</h2>',
scope:{ //数据传入
testName:'@ '
}
}
});
app.controller('ctl',function ($scope) { })
</script>
</body>
</html>

2.双向绑定

双向绑定:模型数据绑定到视图  视图数据绑定到模型

ngModel 表单组件中

$scope.$watch(key,function)监听$scope值的改变

<body ng-controller="ctl">
<div class="container">
<div class="sel">
<select name="" id="" ng-model="selv">
<option value="1">pic1
</option>
<option value="2">pic2
</option>
</select>
</div>
<div class="imgbox">
<img alt="" ng-src="img/{{selv}}.png">
</div>
<div class="btn">
<input type="checkbox" ng-model="btn">是否同意
<button id="btn1" ng-disabled="!btn">注册</button>
</div>
</div>
<script>
var app = angular.module('myapp', ['ng']);
app.controller('ctl', function ($scope) {
});
</script>

 

3. 过滤器和函数

作用:用在表达式中,实现对表达式结果的赛选,过滤,格式化

语法:{{表达式| 过滤器名称}}中间管道符号分开 eg:<p>{{num|currency}}</p>

limitTo:n  限制条数

temp in list   foreach

orderBy  angular.toJson(obj, [pretty]          点点点。。。

<li ng-repeat="tmp in list| orderBy:'age':false|limitTo:2">
{{tmp.age}} {{tmp.name}}
</li>

 

                                                         

4.服务server 

$rootScope 与 $scope  作用域对象

$rootScope id$1 

$Scope id$2 递增  公用数据保存在$rootScope里面 私有的保存在对应的 $scope里面

例子:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<body ng-controller="ctl">
<table>
<thead>
<tr>
<td>请选择</td>
<td>姓名</td>
<td>生日</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="men in arr">
<td><input type="checkbox" ng-model="men.status" ng-checked="selAll"></td>
<td>{{men.name}}</td>
<td>{{men.birthDay}}</td>
</tr>
<tr>
<td><input type="checkbox" ng-model="selAll"></td>
<td>全选</td>
<td></td>
</tr>
</tbody>
</table>
<button ng-click="show()">查看</button>
<script>
var app = angular.module('myApp', ['ng']);
app.controller('ctl', function ($scope) {
$scope.arr = [{name: "king", birthDay: "1992.12.11", status: false}, {
name: "fly",
birthDay: "1944.12.11",
status: false
}, {name: "mary", birthDay: "1920.12.11", status: false}];
$scope.show = function () {
var str = "";
angular.forEach($scope.arr, function (value, key) {
if (value.status) {
str += value.name + "被选中了\n";
}
});
if (str == '') {
alert("都没选中");
} else
alert(str);
};
$scope.$watch('selAll', function () {
angular.forEach($scope.arr, function (value, key) {
$scope.arr[key].status = $scope.selAll
})
})
})
</script>
</body>
</html>

Angular(2)的更多相关文章

  1. Angular(1)

    1.设计原则 1.YAGNI  不要把未来需求引入当前工程   2.KISS  keep it simple and stupid  语义化标记 合理注释 符合规定的命名 3.DRY(don't re ...

  2. Angular(03)-- lint风格规范和WebStorm小技巧

    在开始讲 Angular 各个核心知识点之前,想先来讲讲开发工具 WebStorm 的一些配置以及相应配置文件如 tslint.json 的配置. 因为我个人比较注重代码规范.代码风格,而对于这些规范 ...

  3. Angular(02)-- Angular-CLI命令

    声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...

  4. Angular(01)-- 架构概览

    声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...

  5. 从flask视角学习angular(一)整体对比

    写在前面 前端框架完全不懂. 看着angular中文官网的英雄编辑器教程和核心知识,用偷懒的类比法,从flask django的角度 记录一下自己对angular的理解. 作为工科的武曲,自己的体会是 ...

  6. Angular(三)

    Angular开发者指南(三)数据绑定   数据绑定AngularJS应用程序中的数据绑定是模型和视图组件之间的数据的自动同步. AngularJS实现数据绑定的方式可以将模型视为应用程序中的单一来源 ...

  7. Angular(二)

    Angular开发者指南(二)概念概述   template(模板):带有附加标记的模板HTMLdirectives(指令):使用自定义属性和元素扩展HTMLmodel(模型):用户在视图中显示的数据 ...

  8. Angular(一)

    Angular开发者指南(一)入门介绍   什么是AngularAngularJS是动态Web应用程序的结构框架. 它允许您使用HTML作为模板语言,并允许您扩展HTML的语法以清晰,简洁地表达应用程 ...

  9. angular(3)服务 --注入---自定义模块--单页面应用

    ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...

随机推荐

  1. 排序小结(java版)

    一.归并排序 package org.lxh.demo08.b; class Sort { private int[] a; private int n; Sort(int n) { a=new in ...

  2. adb push和pull使用

    1.运行cmd> 进入adb.exe目录 2.>adb connect ip 3.>adb remount 4.>adb push 本地apk全路径 /system/app/ ...

  3. AngularJS拦截器

    AngularJS是通过拦截器提供了一个全局层面对响应进行处理的途径.拦截器实际是$http服务的基础中间件,用来向应用的业务流程中注入新的逻辑,其核心是服务工厂,通过向 $httpProvider. ...

  4. 游戏贴图中常用术语《DC》的理解

    什么是DC呢? 在GDI中,DC(Device Context)是一个非常重要的概念. 有的书中,将DC翻译为设备描述表,也有的书中翻译为设备上下文. 但是这些翻译,无法在我们的头脑里有强烈的冲击,无 ...

  5. 黑马程序员——【Java高新技术】——反射机制

    ---------- android培训.java培训.期待与您交流! ---------- 一.概述 1.Java反射机制:是指“在运行状态中”,对于任意一个类,都能够知道这个类中的所有属性和方法: ...

  6. HDU 1829 分组并查集

    题意:有两种性别,每组数据表示是男女朋友,判断输入的几组数据是否有同性恋 思路:http://blog.csdn.net/iaccepted/article/details/24304087 分组并查 ...

  7. iOS-Git 所有资料

    查看git所有资料参考这个网站:http://git.oschina.net/progit/

  8. bigworld源码分析(5)——BaseApp分析

    BaseApp负载部分,核心代码缺失...网上的源码中都找不到,暂时没办法分析其核心内容,很遗憾,继续寻找吧,等找到了,再继续自己的分析.

  9. WebDriver定位元素方法

    如果把页面上的元素看作人的话,在现实世界如何找到某人呢?方法有三: 一.通过人本身的属性,例如他的姓名,手机号,身份证号,性别,这些可区别他人的属性.在web页面上的元素也有这些属性,例如,id.na ...

  10. 台球游戏的核心算法和AI(2)

    前言: 最近研究了box2dweb, 觉得自己编写Html5版台球游戏的时机已然成熟. 这也算是圆自己的一个愿望, 一个梦想. 承接该序列的相关博文: • 台球游戏核心算法和AI(1) 同时结合htm ...