AngularJs 常见内置指令

最新推荐文章于 2024-05-13 14:54:25 发布

心郎

最新推荐文章于 2024-05-13 14:54:25 发布

阅读量1.1k

点赞数

分类专栏：前段_angularjs

本文链接：https://blog.csdn.net/u011301203/article/details/53225311

版权

前段_angularjs 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AngularJS 指令</title>
	<!-- <link rel="stylesheet" ng-href="{{link}}"> -->
	<style>
		.red {
			color: red;
		}

		.blue {
			color: blue;
		}
	</style>
</head>
<!--
	指令: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		下拉框表单选中
		ng-init			初始化数据
-->
<body ng-app="App">
	
	<ul ng-controller="DemoController">
		<li ng-bind="name"></li>
		<li>{{name}}</li>
		<li ng-show="1">ng-show用来显示或隐藏内容的，当值为true时显示</li>
		<li ng-hide="0">ng-hide用来显示或隐藏内容的，当值为true时隐藏</li>
		<li ng-if="1">ng-if用来控制元素是否存在，当值为true时存在{{name}}</li>
		<li><img ng-src="{{path}}" alt=""></li>
		<li ng-class="{red: true, blue: true}">ng-class指令</li>
		<li><input type="text" ng-disabled="0"></li>
		<li><input type="text" ng-readonly="1" value="angular"></li>
		<li><input type="checkbox" ng-checked="1">男</li>
		<li>
			<select name="" id="">
				<option value="">河北省</option>
				<option value="">山东省</option>
				<option value="" ng-selected="1">北京市</option>
			</select>
		</li>
	</ul>
	
	<script src="./libs/angular.min.js"></script>
	<script>
		
		// 创建模块
		var App = angular.module('App', []);

		App.controller('DemoController', ['$scope', function ($scope) {

			// $scope

			$scope.name = '张飞';

			$scope.path = './images/author.jpg';

			$scope.link = './main.css';

		}]);

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