AngularJs的基础——常用指令

本文介绍了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>
显示效果:









评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值