AngularJS——1、表达式 / 指令

最新推荐文章于 2019-12-16 08:22:46 发布

原创最新推荐文章于 2019-12-16 08:22:46 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS

AngularJS 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍AngularJS的基础概念和常用指令，包括ng-app定义应用、ng-controller添加控制器、ng-model双向数据绑定、ng-bind数据绑定、ng-repeat循环数组、ng-disabled及ng-model控制元素状态、ng-show/ng-hide显示隐藏元素、ng-click事件处理、自定义指令以及模块和控制器的使用。

1、ng-app 定义一个 AngularJS 应用程序（页面加载完自动引用）。

ng-controller 添加应用的控制器。

ng-model 把元素值（比如输入域的值）绑定到应用程序（变量name）。

ng-bind / {{ expression}} 把应用程序数据绑定到某一处的innerHTML 。

（script 标签包含的（ AngularJS 库）放在 <body> 元素的底部可以提高网页加载速度，但必须置于 AngularJS 脚本前。

因为对 angular.module 的调用只能在库加载完成后才能进行。）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> -->        
    </head>
    <body>
        <div ng-app="">
            <p>名字 : <input type="text" ng-model="name"></p>
            <!-- 两种写法 -->
            <h1>Hello {{name}}</h1>
            <p ng-bind="name"></p>
            <!-- 表达式{{ expression }}直接“输出”数据 -->
            <p>{{ 1*9*8*7 }}</p>
        </div>
        <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script>
            var app = angular.module("xxApp", []);
            app.controller("xxCtrl", function($scope) {
                $scope.name = "Evan Lee";
            });
        </script>
    </body>
</html>

输出：

2、ng-init 初始化应用程序变量。（一般不使用）

<div ng-app="" ng-init="name='Evan Lee'">
    <p>姓名：
        <span ng-bind="name"></span>
    </p>
</div>

输出：

3、ng-bind / {{ expression}}

数字、字符串、对象、数组

<div ng-app="" ng-init="a=1;b=5;c=4;
                        pro='四川';city='成都';
                        person={firstName:'Evan',lastName:'Lee'};
                        points=[6,10,11,12,13]"> 
    <p>姓：{{ person.lastName }}  名：<span ng-bind="person.firstName"></span></p>              
    <p>生日： {{ a*b }} . <span ng-bind=" a*c "></span></p>     
    <p>地址： {{ pro+ " " + city}} <span ng-bind=" pro+ ' ' + city"></span></p>   
    <p> {{ points[3] }}周年 </p>
    <p>following <span ng-bind="points[0]"></span> years</p>               
</div>

输出：

4、ng-repeat 重复一个 HTML 元素。

<div ng-app="" ng-init="names=['YY','FF','LL'];
                alls=[ {name:'YY',sign:'5'},
                       {name:'FF',sign:'0'},
                       {name:'LL',sign:'4'} ]">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
     <li ng-repeat="x in names">
        {{ x }}
     </li>
  </ul>
  <p>使用 ng-repeat 循环对象数组</p>
  <ul>
     <li ng-repeat="x in alls">
        {{ x.name + ', ' + x.sign }}
     </li>
  </ul>
<div>

输出：

5、ng-disabled 绑定应用程序数据（"myClick"）到HTML的disabled属性。

ng-model 绑定应用程序数据（"myClick"）到 checkbox 元素的内容。

<div ng-app="" ng-init="myClick=true">
    <p>
        <button ng-disabled="myClick">button</button>
        <input type="checkbox" ng-model="myClick"/>选中按钮
    </p>
    <p> 是否选中按钮：{{ myClick }} </p>
</div>

6、ng-show / ng-hide 显示或隐藏一个HTML元素

<div ng-app="xxApp" ng-controller="xxCtrl">
    <button ng-click="isVisible()">hide / show</button>
    <!-- ng-show="info" 同 -->
    <p ng-hide="info">
        firstName: <input type=text ng-model="firstName"><br>
        lastName: <input type=text ng-model="lastName"><br><br>
        姓名: {{firstName + " " + lastName}}
    </p>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope) {
        $scope.firstName = "Evan";
        $scope.lastName = "Lee";
        $scope.info = false;
        $scope.isVisible = function() {
            $scope.info = !$scope.info;
        }
    });
</script>

输出：

7、ng-click 单击事件

<div ng-app="xxApp" ng-controller="xxCtrl">
    {{ count }}
    <button ng-click="count = count + 1">点击+1</button>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope) {
        $scope.count = 1215;
    });
</script>

输出：

8、自定义指令

<div ng-app="xxApp" my-dir></div>
<br>
<my-dir>自定义指令！</my-dir>
<script>
    var app = angular.module("xxApp", []);
    app.directive("myDir", function() {
        return {
            template : "创建自定义指令!"
        };
    });
</script>

输出：

模块和控制器

<div ng-app="myApp" ng-controller="myCtrl">
    {{ firstName + " " + lastName }}
</div>
<!-- 包含应用模块的定义程序 -->
<script src="xxApp.js"></script>
<!-- 包含控制器 -->
<script src="xxCtrl.js"></script>

//xxApp.js
//[] 参数用于定义模块的依赖关系,存在依赖则在[]内写上依赖的模块名
var app = angular.module("xxApp", []);

//xxCtrl.js
app.controller("xxCtrl", function($scope) {
    $scope.firstName = "Evan";
    $scope.lastName= "Lee";
});