Angular（2）

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>

posted on 2016-11-28 20:17 godbutton 阅读(108) 评论(0) 编辑收藏举报