5.2 Model
5.2.1 Model组件的基础概念
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.2.1 Model组件</title>
</head>
<body>
<div ng-app="myapp" ng-controller="contro">
<div>{{name}}</div>
<input type="text" ng-model="score" value="95"> <!-- 隐式创建对象模型 -->
<div>{{score}}</div>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myapp",[])
.controller('contro',['$scope',function($scope){
$scope.name="张三"; //1.显示创建模型对象
}])
</script>
</body>
</html>
5.2.2 使用ngRepeater方式遍历Model对象
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.2.2 使用ng-repeater遍历model对象</title>
</head>
<body>
<div ng-app="myapp" ng-controller="contro">
<p ng-repeat="list in Lists">
<span>{{list.name}}</span>
<span>{{list.price}}</span>
</p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myapp",[])
.controller('contro',['$scope',function($scope){
$scope.Lists = [
{name:"书本",price:20},
{name:"笔",price:5},
{name:"订书机",price:15}
];
}])
</script>
</body>
</html>
效果
