AngularJs的基础——常用指令

最新推荐文章于 2020-02-01 20:16:14 发布

原创最新推荐文章于 2020-02-01 20:16:14 发布 · 694 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

AngularJS 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了AngularJS中的几个基本指令，包括ng-app、ng-model、ng-bind等，并通过实例展示了这些指令如何实现数据绑定及控制器的基本使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.常用指令：

1)ng-app:定义应用程序的根元素；

2)ng-model:绑定应用程序数据到html元素；

3)ng-bind:绑定html元素到应用程序数据；

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
</head>
<body>
<div ng-app="">
    <p>在输入框中尝试输入：</p>
    <p>姓名：<input type="text" ng-model="name"/></p>
    <p>{{name}}</p>
    <div ng-bind="name"></div>

</div>
<script src="angular.min.js"></script>
</body>
</html>

显示效果：

4)ng-init:为应用程序定义初始值；一般不使用，通常用一个控制器或模块来代替它。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
</head>
<body>
<div ng-app="" ng-init="sex='男'">
    <div ng-init="sex='女'">
        {{sex}}
    </div>
    {{sex}}
</div>
<script src="angular.min.js"></script>
</body>
</html>

显示效果：女

女

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
</head>
<body>
<div ng-app="" ng-init="person={firstName:'Wang',lastName:'Jason'}">
    <p>姓名为：{{person.lastName}}</p>
</div>
<script src="angular.min.js"></script>
</body>
</html>

显示效果：

姓名为：Jason

5)ng-controller:为应用程序定义控制器对象；

6)ng-repeat:为控制器中的每个数据定义一个模板；

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基础</title>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstCtrl">
        <p>姓：<input type="text" ng-model="firstName"/><br/>
            名：<input type="text" ng-model="lastName"/>
        </p>
        <div >
            <span ng-bind="firstName"></span>
            <span ng-bind="lastName"></span>
        </div>
    </div>
    <div ng-controller="secondCtrl">
        <p>大侠资料：
        <ul>
            <li ng-repeat="p in person">
                姓名：{{p.name}}---年龄：{{p.age}}
            </li>
        </ul>
        </p>

    </div>
</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',[]);
    myApp.controller('firstCtrl',function($scope){
        $scope.firstName="张";
        $scope.lastName="三丰";
    });
    myApp.controller('secondCtrl',function($scope){
        $scope.person=[
            {name:'张三丰',age:105},
            {name:'灭绝师太',age:88},
            {name:'谢逊',age:95}
        ]
    })

</script>
</body>
</html>

显示效果：