AngularJs 数据绑定

最新推荐文章于 2020-07-11 20:25:21 发布

心郎

最新推荐文章于 2020-07-11 20:25:21 发布

阅读量281

点赞数

分类专栏：前段_angularjs

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

版权

前段_angularjs 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<!--
		AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）
		展示到视图（View）中。 所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联，
		分为单向绑定和双向绑定两种方式。
		指定模块  一个页可以有多个模块，但是不能互想嵌套  一般只会有一个
	 -->
	<body ng-app="dome">
		<!-- 指定控制器 -->
		<ul ng-controller="DemoController">
			<li>{{name}}</li>				
			<li ng-bind="country"></li> 	
			<li ng-bind-template="{{name}}-{{nickname}}-{{country}}"></li>
			<li><img ng-src="{{path}}" alt="X头像奥"></li>
		</ul>
		
		<hr /><!--数据遍历-->
		<table ng-controller="DemoController">
			<tr ng-repeat="(key,star) in stars"> <!--不需要索引 可以 star in stars-->
				<td>{{key+1}}: {{star.name}}</td>
				<td>{{star.sex}}</td>
				<td>{{star.age}}</td>
			</tr>
		</table>
		
		<hr /><!-- 要实现数据从视图向模型传递需要借助于表单元素 -->
		<div ng-controller="DemoController">
	        <input type="text" ng-model="msg"> <!--向模型传递数据-->
	        <h4>{{msg}}</h4>
	        <button ng-click="show()">显示</button>
	    </div>
    
    	<hr /><!--点击事件-->
		<div ng-controller="DemoController">
			<ul>
				<li><button ng-click="single()">单击</button></li>
				<li><button ng-dblclick="double()">双击</button></li>
				<li><input type="text" ng-blur="blur()"></li>
				<li ng-mouseout="mouseout()">一些内容</li>
			</ul>
		</div>
		
		<hr /><!--数据筛选-->
		<div ng-controller="DemoController">
			<ul>
				<li ng-repeat="item in items" ng-switch="item">
					<span ng-switch-when="css">{{item}}</span>
				</li>
			</ul>
		</div>
		
		
		<script src="../libs/angular.min.js"></script>
		<script>
			// 定义一个模块 App就是新创建的模块，这个模块又是一个对象
			// 在此对象下又有N多方法，可以实现具体业务逻辑
			var App = angular.module('dome',[]);
			
			// 定义控制器 :名为DemoController
			App.controller('DemoController',['$scope',function($scope){
				
				$scope.name = '张飞';
				$scope.country = '蜀国';
				$scope.nickname = '张翼德';  
				$scope.headImg = './headImg.png';
				
				$scope.stars = [
					{name: '刘德华', sex: '男', age: 62},
					{name: '王力宏', sex: '男', age: 40},
					{name: '周杰伦', sex: '男', age: 39},
					{name: '李玲玉', sex: '女', age: 12}
				];

	            $scope.show = function () {
	                alert($scope.msg);
	            }
            	
            	$scope.single = function () {
				alert('我被单击了');
				}
	
				$scope.double = function () {
					alert('我被双击了');
				}
	
				$scope.blur = function () {
					alert('失去焦点了');
				}
	
				$scope.mouseout = function () {
					alert('鼠标移出了');
				}
			
				$scope.items = ['html', 'css', 'js'];
				
			}]);
			
			
			
		</script>
	</body>
</html>

心郎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJs 数据绑定

 {{nam
复制链接

扫一扫

专栏目录