指令
实列:
<div ng-init="firstName='pp'">
name:<input type="text" ng-model="firstName"></input>
您输入的是:{{firstName}}
</div>
ng-init:作用是初始化数据
ng-model:将把输入域(也就是input)的值,绑定到应用程序(也就是{{firstName}})
no-repeat实现数组
<div ng-init="names=[1,2,3,4]">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
angularJS的MVC实现
实例:
//指定应用程序为myApp,以及控制器myCtrl
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
//实现V(视图)与C(控制器:就是操纵的js代码)分离
<script>
//声明一个采用angular的M(模型)
var app = angular.module('myApp', []);
//函数中传递$scope为参数的对象
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
MVC:M(当前视图中可用的数据),V(视图,HTML),C(js代码,用来添加或者修改属性等操作,所以叫做控制器)
scope:带有属性和方法的模型,当你修改了HTML的部分,模型和控制器的部分也会自动更新。
scope的作用范围
实列:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>姓氏为 {{firstname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names"> {{firstname}}{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["一", "二", "三"];
$rootScope.lastname = "张";
});
</script>
</body>
</html>
结果为张一,张二,张三