您的位置：首页 > Web前端 > AngularJS

AngularJs的基础——常用指令

2015-12-29 14:46 786 查看
一.常用指令：

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>
显示效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航