[AngularJS] Simple Data Binding

来源：互联网发布：天盾数据恢复官网下载编辑：程序博客网时间：2024/05/20 20:02

(1) AngularJS

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

(2) Data Binding

ng-appng-modelng-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){});

0 0