angular 双向数据绑定
angular的特性非常多，今天主要说说：双向数据绑定。
在传统的js代码或jquery代码中，单向数据绑定无处不在。
或许你和我一样，受够了写这些面条式的代码，代码交织在一起，分都分不清。
在真实项目中，有一个需求：
页面中有两个下拉框，第一个下拉框选择机场，第二个下拉框选择航站楼。
很明显，这是二级联动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two Way Data-Binding</title>
</head>
<body ng-app>
<div ng-controller="secondController">
<select ng-model="airport" ng-options="airport.name for airport in airports">
<option value="" >choose airport</option>
</select>
<select ng-model="detail" ng-options="detail.name for detail in airport.details">
<option value="">choose detail</option>
</select>
<input type="text" value="{{airport.id}}">
</div>
<script src='javascripts/angular.js'></script>
<script>
function secondController($scope){
$scope.airports=[
{name:"首都国际机场",id:"1",details:[{name:"T1航站楼A"},{name:"T1航站楼B"},{name:"T1航站楼C"}]},
{name:"广州天河机场",id:"2",details:[{name:"T2航站楼A"},{name:"T2航站楼B"},{name:"T2航站楼C"}]},
{name:"武汉国际机场",id:"3",details:[{name:"T3航站楼A"},{name:"T3航站楼B"},{name:"T3航站楼C"}]}
]
}
</script>
</body>
</html>
|
代码非常简洁：js部分仅仅只有一个数据模型，而这在真实的项目中是从后端取到的。
当我看到这效果后，我自己都大吃一惊。
这如果用jquery代码来写，还不得弄个几十行。
构思一个精巧的数据模型＋适合的指令＝前所未有的简洁。
二级联动实现了，三级联动还远吗？
让我们来实现一个常见的省市县三级联动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two Way Data-Binding</title>
</head>
<body ng-app>
<div ng-controller="secondController">
<select ng-model="province" ng-options="province.name for province in provinces">
<option value="" >choose province</option>
</select>
<select ng-model="city" ng-options="city.name for city in province.citys">
<option value="">choose city</option>
</select>
<select ng-model="county" ng-options="county.name for county in city.countys">
<option value="">choose county</option>
</select>
</div>
<script src='/vendors/angular/angular.min.js?v=2.1.3'></script>
<script>
function secondController($scope){
$scope.provinces=[
{name:"湖北省",
citys:[
{name:"武汉市",countys:[{name:"武昌"},{name:"汉口"}]},
{name:"咸宁市",countys:[{name:"咸安"},{name:"温泉"}]}
]
},
{name:"湖南省",
citys:[
{name:"长沙市",countys:[{name:"岳麓区"},{name:"芙蓉区"}]},
{name:"衡阳市",countys:[{name:"衡山县"},{name:"衡山县"}]}
]
},
{name:"江西省",
citys:[
{name:"九江市",countys:[{name:"九江县"},{name:"庐山区"}]},
{name:"南昌市",countys:[{name:"南昌县"},{name:"莲塘镇"}]}
]
}
]
}
</script>
</body>
</html>
|
你可以看到难点关键在于构建数据模型啊。
它完全让你放开手脚，不用再关注事件绑定，而把重心放在数据模型上。
这不能不说是一种前所未有的开发模式。