首页 > 代码库 > AngularJs之九（ending......)

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

2024-08-30 20:39:05   215人阅读

今天继续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="http://www.mamicode.com/{{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.info
16      })
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......)


联系
我们