ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。最外层的div设置ng-app=""
ng-model 指令把输入域的值绑定到应用程序变量 name。
<input type="text" ng-model="name"/>
<p>{{name}}</p>
当输入框输入什么内容下面的p就显示什么
ng-bind :这个标签里html的内容绑定到了那个内容,显示的html的内容就是这个ng-bind的内容
<p>姓名为 <span ng-bind="firstName"></span></p>和 <p>姓名为 {{firstName}}</p>是一样的效果
ng-init: 初始化变量。这样就可以直接在html的标签里定义变量啦。
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: {{ quantity * cost }}</p> --结果是1*5=5
AngularJS 数组
<div ng-app="" ng-init="img=[2,5,9,0]">
<p ng-bind="img[2]"></p>
</div>
---输出的是5
对象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 <span ng-bind="person.lastName"></span></p>
</div>
ng-repeat 重复一个 HTML 元素
<div ng-app="" ng-init="names=['a','b','c','d']" >
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
---结果就是遍历了names这个数组并输出
ng-controller 定义了控制器。
<h1>{{carname}}</h1>
</div>
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
表达式写在双大括号内:{{ expression }}。
<div ng-app="" ng-init="firstName='John'">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1> ---输出的是你写的那个输入框的内容
<div ng-bind=”firstName”></div> ---输出的是John
</div>
AngularJS Scope(作用域)
scope是应用在js和html之间的纽带,它是一个对象有自己的对象和方法.可以作为一个参数参数传递。
AngularJS 控制器
控制里面的数据,我感觉就相当于把ng-init里面的数据写在了这个控制器的js里面。<div ng-app="myApp"ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
var app=anglar.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.firstName = "John";
$scope.lastName = "Doe";
})