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. 不用static,巧用对象.方法调用java中的函数

    先生成一个对象,用"对象.方法()"的方式调用. java中的main方法是静态的,用于程序的入口,在静态方法中无法调用非静态方法,只能调用静态方法.想调用静态方法的话就要先生成该 ...

  2. Java类的成员函数调用顺序

    class A { public A() { System.out.println("----------A 构造-------------"); } static void sb ...

  3. Wince 6.0 窗口最大化显示

    在InitDialog用如下代码实现: CRect   m_FullScreenRect;   //全屏区域 CRect   WindowRect; GetWindowRect(&Window ...

  4. [CDN]CDN的系统架构

    ---恢复内容开始--- 1.功能架构: CDN技术自1998年诞生以来,伴随着互联网的高速发展,其技术一直在持续演进和完善,但基本的CDN功能架构在2003年左右就已基本形成和稳定下来.从功能上划分 ...

  5. [安卓]windows下如何安装Android源码

    本文改写于:http://www.cnblogs.com/skyme/archive/2011/05/14/2046040.html 1.下载并安装git: 在git-scm.com上下载并安装git ...

  6. oracle查看当前用户权限

    查看用户和默认表空间的关系select username,default_tablespace from dba_users;--查看当前用户能访问的表select * from user_table ...

  7. Java/javaEE/web/jsp/网站编程环境配置及其软件下载和网站路径

    Java/javaEE/web/jsp/网站编程环境配置及其软件下载和网站路径 (2015/07/08更新) JDK下载地址(JDK官网下载地址) 下载地址为:http://www.oracle.co ...

  8. 进监狱全攻略之 Mifare1 Card 破解

    补充新闻:程序员黑餐馆系统 给自己饭卡里充钱 ,技术是双刃剑,小心,小心! 前言 从M1卡的验证漏洞被发现到现今,破解设备层出不穷,所以快速傻瓜式一键破解不是本文的重点,年轻司机将从本文中获得如下技能 ...

  9. 拔靴法--Bootstrap--R语言实现

    拔靴法属于重复抽样(resampling)方法,与Monte Carlo相比,二者真实的母体不同.它是将已有的观察值作为母体重复抽样, 以求取原先资料不足二无法探讨的资料特性. 举个例子,假设x1,x ...

  10. Modbus工业协议在Android中的应用

    现在工业信息画发展,很多工厂都需要做信息化展示,通常都是利用Android一体机来进行展示和交互. Modbus协议是全球第一个用于工业现场的总线协议,与外设交互可以采用串口通信,tcp等方式:通常在 ...