HTML在構建應用(App)時存在諸多不足之處陵刹,AngularJS通過擴展一系列的HTML屬性或標簽來彌補這些缺陷截驮,
所謂指令就是AngularJS自定義的HTML屬性或標簽浮毯,這些指令都是以ng-做為前綴的,例如ng-app其监、ng-controller昭躺、ng-repeat等。
-
內置指令:
- ng-app 指定應用根元素,至少有一個
- ng-controller 指定控制器
- ng-show 控制器元素是否顯示, true顯示幔翰、false不顯示
- ng-hide控制元素是否隱藏漩氨,true隱藏、false不隱藏
- ng-if控制元素是否“存在”遗增,true存在叫惊、false不存在
- ng-src增強圖片路徑
- ng-href增強地址
- ng-class控制類名
- ng-include引入模板
- ng-disabled表單禁用
- ng-readonly表單只讀
- ng-checked單/復選框表單選中
- ng-selected下拉框表單選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/angular.js"></script>
<script>
//1.創(chuàng)建模塊
var app = angular.module('app', []);
//2.創(chuàng)建控制器
app.controller('xmgController', ['$scope', function ($scope) {
$scope.name = "p標簽 p標簽";
$scope.msg = "h1標簽";
$scope.course = ['html', 'css', 'js'];
$scope.stu = [
{name:'zs', no:'11'},
{name:'ls', no:'22'},
{name:'wc', no:'38'}
];
}]);
//3.綁定模塊 ng-app="app"
//4.綁定控制器
</script>
<!--3.綁定模塊 ng-app="app"-->
<body ng-app="app" ng-controller="xmgController">
<div>
<p>{{name}}</p>
</div>
<div>
<h1>{{msg}}</h1>
</div>
<div>
<ul>
<!--指令:angular給原生的html標簽添加一些新屬性,達到自己指定的功能-->
<!--所有指令都以ng-開頭-->
<!--遍歷-->
<!--<li ng-repeat="(key, value) in course">{{key}}-{{value}}</li>-->
<li ng-repeat="value in course">{{value}}</li>
</ul>
<ul>
<li ng-repeat="per in stu">{{per.name}}-{{per.no}}</li>
</ul>
</div>
</body>
</html>