數(shù)據(jù)的綁定：單項數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定
1、單項數(shù)據(jù)綁定（模型到視圖）
<body ng-app="app">
<ul ng-controller="DemoController">
<li>{{name}}{{age}}</li>
<li ng-cloak>{{name}}{{age}}</li>
<li ng-bind="name"></li>
<li ng-bind-template="{{age}}{{name}}"></li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
// 單項數(shù)據(jù)綁定姜贡，$scope-->view
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
// $scope就是模型
$scope.name = "張三";
$scope.age = 10;
}])
</script>
</body>
運行結(jié)果：
運行結(jié)果.png
其中綁定數(shù)據(jù)有兩種方式：“{{}}”雙花括弧或者ng-bind兩種方式，但是兩者的區(qū)別在與使用“{{}}”會發(fā)生“閃爍”,原因很簡單磷支，頁面在解析的時候是從上往下執(zhí)行的谒撼，當(dāng)執(zhí)行到{{name}}是還沒有加載angular js庫，所以會發(fā)生“閃爍”雾狈，當(dāng)然也有解決這種現(xiàn)象的方法就是在標(biāo)簽中加上ng-cloak指令可以避免“閃爍”廓潜；
同時綁定兩個數(shù)據(jù)有兩中方式(ng-bind-template)：
<li ng-cloak>{{name}}{{age}}</li>
<li ng-bind-template="{{age}}{{name}}"></li>
2、雙向數(shù)據(jù)綁定箍邮，用于表單(視圖向模型傳遞數(shù)據(jù))
<body ng-app="app">
//視圖
<div ng-controller="DemoController">
<input type="text" ng-model="msg">
<h2>小明說：{{msg}}</h2>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
// 單項數(shù)據(jù)綁定茉帅，$scope-->view
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
// $scope就是模型
$scope.show =function () {
alert($scope.msg);
}
}])
</script>
</body>
運行結(jié)果：
運行結(jié)果.png
通過為表單元素添加ng-module指令實現(xiàn)視圖向模型數(shù)據(jù)的綁定。
通過ng-init可以初始化模型：
<div ng-controller="DemoController" >
<input type="text" ng-model="msg" ng-init="msg='你飯吃了嘛'">
<h2>小明說：{{msg}}</h2>
</div>
運行結(jié)果：
運行結(jié)果.png
這樣在頁面剛加載完就會默認(rèn)填充一個數(shù)據(jù)锭弊；
當(dāng)然除了這些堪澎，還有其他的，給按鈕綁定單擊味滞，雙擊,鼠標(biāo)移出事件等等：
<body ng-app="app">
<div ng-controller="DemoController" >
<!--<input type="text" ng-model="msg" ng-init="msg='你飯吃了嘛'">-->
<!--<h2>小明說：{{msg}}</h2>-->
<button ng-click = "fun1()";>點擊我</button>
<button ng-dblclick = "fun2()";>點擊我樱蛤，我被雙擊了</button>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
// 單項數(shù)據(jù)綁定，$scope-->view
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
// $scope就是模型
$scope.fun1=function () {
alert("我被點擊了");
}
$scope.fun2=function () {
alert("我被雙擊了");
}
}])
</script>
</body>
單擊事件.png
3剑鞍、循環(huán)遍歷元素
<body >
<div class="box" ng-app="app">
<div ng-controller="Democontroller">
<ul>
<li ng-repeat="c in course">{{c.name}},{{c.age}}歲</li>
</ul>
</div>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('Democontroller',['$scope',function ($scope) {
$scope.course =[
{name:"劉德華",age:30},
{name:"薛之謙",age:28},
{name:"范冰冰",age:20}
]
}]);
</script>
</body>
運行結(jié)果：
運行結(jié)果.png
還可以通過ng-switch-when過濾：
<body >
<div ng-controller="DemoController">
<ul>
<li ng-repeat="item in items" ng-switch="item">
<span ng-switch-when="css">{{item}}</span>
</li>
</ul>
</div>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
$scope.items = ['html', 'css', 'js'];
}]);
</script>
</body>
運行結(jié)果.png
就是說昨凡，當(dāng)items的值為css時才顯示出來。
