2016年4月11日

[TOC]

2016年4月11日

angularjs

angularJs的指令

• ng-disabled

  • 服务 $interval

• ng-readonly

• ng-checked

  • 是否选中。

• ng-value

  • input的value值，ng-value在没有加载数据，内容为空。

数据加载显示指令

• ng-bind

<div ng-bind="text"></div>

数据加载完再加载视图，但只支持一个表达式。

• ng-bind-template

可以添加多表达式。

- ng-bind-html ``` //使用这个功能需要添加额外的插件。 $scope.text = '

hello

'; //把字符串当做html文本来解释。 ``` - ng-cloak 当这个指令还没有解释完成，就会隐藏，当解释完成才会显示出来。{{text}} - ng-non-bindable 不去解释这个表达式。{{text}}

样式属性相关指令

• ng-class

• ng-style

• ng-href

• ng-src

• ng-attr-(suffix)

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.text = 'hello';
    $scope.style = "{color:'red',background:'yellow'}";
    $scope.sClass = "{red:true,yellow:true}";
    $scope.url = "http://www.baidu.com";
}]);

<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>

<div ng-controller="Aaa">
    <div ng-class="{red:true}">{{text}}</div>
    <div ng-class="{{sClass}}">{{text}}</div>

    <div ng-style="{color:'red',background:'yellow'}">{{text}}</div>
    <div ng-style="{{style}}">{{text}}</div>

    <a ng-href="{{url}}">aaaaaaa</a>
    <a ng-href="{{'http://www.baidu.com'}}">Baidu</a>

    <!-- 自定义属性前缀 -->
    <a ng-attr-href="{{url}}" ng-attr-title="{{text}}" ng-attr-class="" ng-attr-style="">aaaaaaa</a>
    <a ng-attr-href="{{url}}" ng-attr-title="{{text}}" ng-attr-class="" ng-attr-style="">aaaaaaa</a>
</div>

DOM相关操作指令

• ng-show

  • true为显示。

• ng-hide

  • true为隐藏

• ng-if

  • 通过DOM添加或者删除这个标签。

• ng-swtich

  • on

  • default

    • 首先显示默认的。

  • when

    • 然后根据默认值变化切换。

• ng-open

  • 针对details标签，

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){

    $scope.bBtn = true;

}]);

<div ng-controller="Aaa">
    <input type="checkbox" ng-model="bBtn">
    <div ng-show="bBtn">aaaaaaaaaaaa</div>
    <div ng-if="bBtn">aaaaaaaaaaaa</div>
    <div ng-switch on="bBtn">
        <p ng-switch-default>默认的效果</p>
        <p ng-switch-when="false">切换的效果</p>
    </div>

    <details ng-open="bBtn">
        <summary>Copyright 2011.</summary>
        <p>All pages and graphics on this web site are the property of W3School.</p>
    </details>

</div>

初始化数据指令

• ng-init

  • 标签内定义一下数据。

div ng-controller="Aaa" ng-init="text='hello'">
    {{ text }}
</div>-->

<div ng-controller="Aaa">
    <div ng-repeat="arrOuter in arr" ng-init="outerIndex = $index">
        <div ng-repeat="arrInner in arrOuter" ng-init="innerIndex = $index">
            <p>{{arrInner}}:{{outerIndex}}{{innerIndex}}</p>
        </div>
    </div>
</div>

• ng-include

  • 引入其他文件嵌套到当前页面。

<div ng-app="myApp" ng-controller="Aaa" ng-include="'temp.html'">
</div>

• ng-model

  • ng-model-options

  • updateOn

    • 数据什么时候更新的一个选项，可以选择光标离开等。

<input type="text" ng-model="text" ng-model-options="{updateOn : 'blur'}">
<div>{{text}}</div>

• ng-controller

  • as

    • 绑定一个构造函数，然后在指令中可以创建一个对象。

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',FnAaa]);

function FnAaa($scope){
}
FnAaa.prototype.num = '123';
FnAaa.prototype.text = 'hello';
FnAaa.prototype.show = function(){
    return 'angularJS';
};

<div ng-controller="FnAaa as a1">
    <div>{{a1.text}}:{{a1.show()}}</div>
</div>