AngularJs之九(ending......)

时间:2023-12-22 19:51:50

今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分。

今天要写的也是一个基础的选择列表:

一:使用ng-options,数组进行循环。

 <div ng-app="uapp" ng-controller="uctrl">
<select ng-model="selectcitys" ng-options="x for x in citys"></select>
<h1>你选择的是:{{selectcitys}}</h1>
</div>
<script>
var app=angular.module("uapp",[]);
app.controller("uctrl",function($scope){
$scope.citys=["北京","上海","南京","钓鱼岛"]
})
</script>

二:使用ng-repeate指令循环数组。

 <div ng-app="myapp" ng-controller="myctrl">
<select ng-model="selectvalue">
<option ng-repeat="x in citys" value="{{x.ename}}">{{x.cname}}</option>
</select>
<h2>你选择的城市是:{{selectvalue}}</h2>
</div>
<script>
var mapp=angular.module("myapp",[]);
var mcity={info:[
{"cname":"北京","ename":"beijing"}
,{"cname":"上海","ename":"shanghai"}
,{"cname":"深圳","ename":"shenzhen"}
]}
mapp.controller("myctrl",function($scope){
$scope.citys=mcity.info
})
</script>

三:使用ng-options。

 <div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedSite" ng-options="x for (x, y) in sites"></select>
<h1>你选择的值是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
});
</script>

四:使用对象作为数据源, x 为键(key), y 为值(value)。

 <div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedCar" ng-options="x for (x, y) in cars"></select>
<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
}
});
</script>

五:最后说一下angularJs的客户端包含。

大多服务端脚本都支持包含文件功能,使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:
angularJS包含文件的语法是:
<div ng-include=“‘文件名.html'"></div>