AngularJS常用指令

最新推荐文章于 2019-07-02 23:42:59 发布

Wisdom_Qiu

最新推荐文章于 2019-07-02 23:42:59 发布

阅读量427

点赞数

分类专栏：前端框架文章标签： angularjs

本文链接：https://blog.csdn.net/Wisdom_Qiu/article/details/52992704

版权

前端框架专栏收录该内容

4 篇文章 1 订阅

订阅专栏

ng-app指令：标记AngularJS脚本的作用域，在html标签中添加ng-app属性，说明整个html都是AngularJS脚本作用域。也可以局部添加ng-app属性如在div中运行。

ng-model：类似与ID的作用，用来绑定当前元素

<div id="box" ng-app ng-init="name='小雪' ">
    <h1>{{name || 'yyq' }}</h1>
    <input type="text" ng-model='name' />
</div>

表达式
- 双大括号内的表达式：核心的功能是绑定，需要运算其中的表达式，然后再插入到DOM元素中，DOM可以根据表达式的结果的改变而进行实时更新.并且它只在AngularJS的作用域中运行，而不是在整个DOM中
- 对于AngularJS，鼓励运用MVC（模式module ，试图View ，控制器Controller）模式解耦代码和分解关注点。
- 由于加载顺序的问题，Angjular.js放在底部，{{}}表达式会出现闪现的问题，因此要么将Angular.js放在head里面声明，要么使用ng-bind
ng-init：用来初始化变量，可以初始化对象和数组等，如果初始化多个变量，中间用；分号隔开

“`
ng-init=”name = ‘小雪’; age = 18;person = {name:’YYQ’, age: 20} ; arr = [33,44,55];friends = [{name:’dlj’, age : 21} , {name:’YDL’, age :44}]”

5. ng-bind：用于绑定

 ```
    <div ng-app ng-init="name = '小黑'">
        <h2>{{ name }}</h2>
        <h2 ng-bind='name'></h2>
    </div>

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

    <div ng-init="nums = [22,33,11,44]">
        <h1>遍历数组</h1>
        <ul>
        <!--for.. in的写法，for...in的功能-->
        <!--                                 
        注意：如果遍历数组有重复的数据的，默认会报错，
        我们需要加入track by $index就可以解决
        例如：<li ng-repeat="num in nums track by $index">{{ num }}</li>
        -->
        <li ng-repeat="num in nums ">{{ num }}</li>
        </ul>
    </div>

ng-inclue:映入的文件名外层需要套一个单引号，否则显示不出来而且需要用服务器打开，本地不能打开

    <div ng-include="'footer.html'"></div>

ng-click 指令定义了 AngularJS 点击事件。

    <button ng-click="count = count + 1">点我！</button>
    <p>{{ count }}</p>

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope是一个对象，有可用的方法和性。Scope 可应用在视图和控制器上。

    <div ng-app="myApp" ng-controller="myCtrl">
        <h1>{{carname}}</h1>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.carname = "Volvo";
        });
    </script>

10.
* ng-hide 指令用于设置应用部分是否可见。
* ng-hide=”true” 设置 HTML 元素不可见。
* ng-hide=”false” 设置 HTML 元素可见。
11.
* ng-show 指令可用于设置应用中的一部分是否可见。
* ng-show=”false” 可以设置 HTML 元素不可见。
* ng-show=”true” 可以以设置 HTML 元素可见。
12.ng-class:用来切换样式

    ng-class="{true:'active' , false : 'inactive'}[flag]"

通过布尔值来判断应用哪个样式，其中active与inactive是css的类名

13.过滤器：

    <body ng-app>
        <div ng-init="money = 1234567; name = 'abCde'">
            <h1>货币格式化</h1>
            <h2>{{ money | currency }}</h2>
            <h2>{{ money | currency : "￥"}}</h2>
            <h2>{{ money | currency : "RMB ￥"}}</h2>

            <h1>字母大小写</h1>
            <h2>{{ name | uppercase }}</h2>
            <h2>{{ name | lowercase }}</h2>
            <!--
                [33,44,55,66] | limitTo : 2)[0]
                limitTo限制的是长度，后面的0代表签名2个[33,44]的第0个         
            -->
            <h1>限制字符串数组或者字符串的长度</h1>
            <h2>{{ ([33,44,55,66] | limitTo : 2)[0] }}</h2>
            <h2>{{ 'hello world' | limitTo : 4 }}</h2>
            <h2>{{ 'hello world' | limitTo : 5 | uppercase }}</h2>

            <h1>给数字设置千分位</h1>
            <h2>{{ 1234567 | number }}</h2>
            <!--number后面的2表示小数点后面两位             四舍五入              -->
            <h2>{{ 1234567.126 | number:2 }}</h2>
        </div>
    </body>

    <body ng-app>
        <div ng-init="ages = [12,33,1,23,54,3,15]; persons = [{name : '小白',age : 20},{name : '小黑',age : 22} ,{name : '小黄',age : 29}]">
            <h1>数组没没有对象的排序</h1>
            <h2>{{ '升序： ' + (ages | orderBy) }}</h2>
            <!--升序： 1,3,12,15,23,33,54-->
            <h2>降序：{{ ages | orderBy : order : true }}</h2>
            <!--降序：[54,33,23,15,12,3,1]-->
            <h2>升序：{{ ages | orderBy : order : false }}</h2>

            <h1>数组内有对象的排序</h1>
            <h2>按照age升序： {{ persons | orderBy : "age" }}</h2>
            <h2>按照age降序： {{ persons | orderBy : 'age' : true }}</h2>
        </div>
    </body>