关闭

angular学习笔记一

222人阅读 评论(0) 收藏 举报
分类:
输出显示
<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <title>angular</title>
    <script src="angular.js"></script>
    <script src="index.js"></script>
</head>
<style type="text/css">
.ng-hide {
  display:block!important;
  position:absolute;
  top:-9999px;
  left:-9999px;
}
</style>
<body>
<div ng-controller="bookCtrl">
	<!-- message为使用简化写法输出内容',message2为使用指令输出,当angular.js没有加载时(网络不好时),简化输出的方式会在页面显示出表达式,所以不建议在首页使用,而指令表达式则没有问题-->
	<p>{{message}}</p>
	<p ng-bind="message2"></p>
	<!-- ng-show的值为true时显示,false时隐藏 (PS:必须加上ng-hide属性后才会隐藏)-->      
	 <div ng-show="true"> Visible </div>      
	 <div ng-show="false" class="ng-hide"> Invisible </div>
</div>
</body>
</html>

index.js

function bookCtrl($scope){
	$scope.message ="Hello World";
	$scope.message2 = "Hello everyOne";
};

绑定事件

html

<div ng-controller="ClickController">
		<button ng-click="click()">button</button>
		<p>{{message3}}</p>
	</div>
js

function ClickController($scope) {         
		$scope.click = function(){
			$scope.message3= "click button"; 
		}      
	}

点击button 输出 
click button


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:28370次
    • 积分:617
    • 等级:
    • 排名:千里之外
    • 原创:34篇
    • 转载:4篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论