AngularJs之九（ending......)

標籤：tao   ...   mod   上海   hang   提升   blog   sites   對象   

今天繼續angularJs，但也是最後一篇關於它的了，基礎部分差不多也就這些，後續有機會再寫它的提升部分。

今天要寫的也是一個基礎的挑選清單:

一：使用ng-options，數組進行迴圈。

 1 <div ng-app="uapp" ng-controller="uctrl"> 2     <select ng-model="selectcitys" ng-options="x for x in citys"></select> 3         <h1>你選擇的是：{{selectcitys}}</h1> 4 </div> 5 <script> 6  var app=angular.module("uapp",[]); 7  app.controller("uctrl",function($scope){ 8      $scope.citys=["北京","上海","南京","釣魚島"] 9      })10 </script>

二：使用ng-repeate指令迴圈數組。

 1 <div ng-app="myapp" ng-controller="myctrl"> 2     <select ng-model="selectvalue"> 3         <option ng-repeat="x in citys" value="{{x.ename}}">{{x.cname}}</option> 4            </select> 5          <h2>你選擇的城市是：{{selectvalue}}</h2> 6 </div> 7 <script> 8  var mapp=angular.module("myapp",[]); 9  var mcity={info:[10      {"cname":"北京","ename":"beijing"}11      ,{"cname":"上海","ename":"shanghai"}12      ,{"cname":"深圳","ename":"shenzhen"}13      ]}14  mapp.controller("myctrl",function($scope){15      $scope.citys=mcity.info16      })17 </script>

三：使用ng-options。

 1 <div ng-app="myApp" ng-controller="myCtrl"> 2     <select ng-model="selectedSite" ng-options="x for (x, y) in sites"></select> 3     <h1>你選擇的值是: {{selectedSite}}</h1> 4 </div> 5 <script> 6 var app = angular.module(‘myApp‘, []); 7 app.controller(‘myCtrl‘, function($scope) { 8     $scope.sites = { 9         site01 : "Google",10         site02 : "Runoob",11         site03 : "Taobao"12     };13 });14 </script>

四：使用對象作為資料來源, x 為鍵(key), y 為值(value)。

 1 <div ng-app="myApp" ng-controller="myCtrl"> 2 <select ng-model="selectedCar" ng-options="x for (x, y) in cars"></select> 3     <h1>你選擇的是: {{selectedCar.brand}}</h1> 4     <h2>模型: {{selectedCar.model}}</h2> 5     <h3>顏色: {{selectedCar.color}}</h3> 6 </div> 7 <script> 8 var app = angular.module(‘myApp‘, []); 9 app.controller(‘myCtrl‘, function($scope) {10     $scope.cars = {11         car01 : {brand : "Ford", model : "Mustang", color : "red"},12         car02 : {brand : "Fiat", model : "500", color : "white"},13         car03 : {brand : "Volvo", model : "XC90", color : "black"}14     }15 });16 </script>

五：最後說一下angularJs的用戶端包含。

大多服務端指令碼都支援包含檔案功能，使用 AngularJS, 你可以使用 ng-include 指令來包含 HTML 內容:
angularJS包含檔案的文法是：
<div ng-include=“‘檔案名稱.html‘"></div>

 

AngularJs之九（ending......)