<!DOCTYPE html>
<html lang="zh" ng-app="myapp">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="../bower_components/angular/angular.js" type="text/javascript" charset="utf-8"></script>
<title>AngularJs-数据的双向绑定</title>
</head>
<body ng-init="username='bilaisheng';address='北京';">
<h3>for TestController</h3>
<ul ng-controller="TestController">
<li ng-repeat="room in classroom">
{{room.name}}-->{{room.age}}-->{{username}}-->{{address}}
</li>
</ul>
<h3>for TestController2</h3>
<ul ng-controller="TestController2">
<li ng-repeat="room in classroom">
{{room.name}}-->{{room.age}}-->{{username}}-->{{address}}
</li>
</ul>
<h3>for ng-bind</h3>
<div>用户名:<input type="text" ng-model="username" /></div>
<div>你输入的用户名是：{{username}}</div>
<div>你输入的用户名是：<span ng-bind="username"></span></div>
<div>你输入的用户名是：<span class="ng-bind:username"></span></div>
<script type="text/javascript">
// 初始化一个angularjs的代理对象
var app = angular.module("myapp",[]);
// for TestController
app.controller("TestController",function($scope,$rootScope,$log){
$scope.classroom=[
{name:"张三",age:20},
{name:"李四",age:21},
{name:"王五",age:22},
{name:"赵六",age:23}
];
$scope.username="李七";
});
// for TestController2
app.controller("TestController2",function($scope,$rootScope,$log){
$scope.classroom=[
{name:"张三",age:20},
{name:"李四",age:21},
{name:"王五",age:22},
{name:"赵六",age:23}
];
$scope.username="李七";
});
/**
* ng-init : 初始化数据
* ng-repeat: 迭代数组和对象,语法
* ng-repeat="变量 in 对象/数组" -- 循环
* eg : <div ng-repeat"变量 in 对象/数组"></div>
*
* AngularJs双向数据绑定: 能够大幅度减少对dom元素的操作.
*/
</script>
</body>
</html>