您的位置：首页 > Web前端 > AngularJS

[AngularJS] Simple Data Binding

2015-12-23 15:06 615 查看

(1) AngularJS

https://github.com/colorfest/angularjs 
make single-page applications easier 方便构建单网页应用
It is an MVC (Model-View-Controller) framework

(2) Data Binding

ng-app
ng-model
ng-bind / {{}}
ng-init eg: ng-init="quantity=1;cost=15"
ng-repeat

(2-1) ng-app ng-model ng-bind

<body ng-app>
<input name="username" type="text" ng-model="username">
<h1 ng-bind="username"></h1>
<h1>{{username}}</h1>
</body>

Result:

(2-2) ng-init

<body>
<div ng-app="ngapp" ng-init="price=100;num=1">
<!--ng-init="price=100;num=1"-->

<h1>Apple:</h1>
Price: <input ng-model="price" type="text"><br>
Num: <input ng-model="num" type="text">
<h1>Total Price:{{"$"+price*num}}</h1>
</div>
</body>

(2-3) ng-repeat

<body>
<div ng-app="ngapp"
ng-init="apple=[
{username:'jessica',age:19},
{username:'krystal',age:16}
]">
<h1 ng-repeat="x in apple"><!--输出数组中的数据-->
{{x.username +" "+ x.age}}
</h1>
</div>
</body>

(3) Bi-directional

数据双向绑定:
试图改变了某个值，数据模型会观察这个变化
如果数据模型变化了，视图根据变化重新渲染

(4) ng-controller

ng-controller: 包含的元素属于某个控制器
ng-controller 用来控制app
而ng-app: 用来定义app

angular.module(module name,[])
function($scope)

$scope: 是js对象，它并不负责处理和操作数据，只是视图和HTML间的桥梁，是视图和controller间的联系。

<body>
<div ng-app="ngapp" ng-controller="ngcontroller">

Price: <input ng-model="price" type="text"><br>
Num: <input ng-model="num" type="text">

<h1>Total Price:{{"$"+price*num}}</h1>
</div>
</body>

<script>
var app=angular.module("ngapp",[]);
app.controller("ngcontroller",function($scope){
$scope.price=0;
$scope.num=0;
});
</script>

(5) Summary

ng-app

ng-model

ng-bind / {{}}

ng-init

ng-repeat(for array or obj)

ng-controller

angular.module(module name,[])

controller(“controller name”,function($scope){});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： mvc angularjs binding

相关文章推荐

新的分享

章节导航