AngularJS 入门3-选择框和表格

AngularJS 入门3-选择框和表格

 

1.AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用ng-options创建选择框

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">

</select>

</div>

使用 ng-options 创建选择框

<div ng-app="myApp" ng-controller="myCtrl">                          

<select ng-model="selectedName">

<option ng-repeat="x in names">{{x}}</option>

</select>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.names = ["Google", "Runoob", "Taobao"];

$scope.selectedName = $scope.names[0];

});

</script>

应该用哪个更好?

ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项ng-model是一个对象， 而ng-repeat 的ng-model是一个字符串。

使用 ng-options 创建选择框

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedSite" ng-options="x.site for x in sites">

</select>

//ng-model = x

<p>你选择的是: {{selectedSite}}</p>

<p>网址为: {{selectedSite.url}}</p>

</div>

使用 ng-options 创建选择框

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedSite">

<option ng-repeat="x in sites" value="{{x}}">{{x.site}}</option>

</select>

//ng-model = x

<p>你选择的是: {{selectedSite}}</p>

<p>网址为: {{selectedSite.url}}</p>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

   $scope.sites = [

    {site : "Google", url : "http://www.google.com"},

    {site : "Runoob", url : "http://www.runoob.com"},

    {site : "Taobao", url : "http://www.taobao.com"}

];

});

</script>

 

ng-model是一个对象

 

ng-model是一个字符串

 

ng-options 使用对象有很大的不同，如下所示：

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

<div ng-app="myApp" ng-controller="myCtrl">

//这里x是site01，y和selectedSite是"Google"

<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>

<div ng-app="myApp" ng-controller="myCtrl">

//这里x是car01，y和selectedSite是{brand : "Ford", model : "Mustang", color : "red"}

<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>

结果：

 

结果：

 

 

 

2.AngularJS 表格

ng-repeat 指令可以完美的显示表格。

Customers_JSON.php 文件代码：                                                      

<?php

echo <<<EOT

{

"records":[

{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},

{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},

{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},

{"Name":"Around the Horn","City":"London","Country":"UK"},

{"Name":"B's Beverages","City":"London","Country":"UK"},

{"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},

{"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},

{"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},

{"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},

{"Name":"Bon app'","City":"Marseille","Country":"France"},

{"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},

{"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},

{"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},

{"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},

{"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}

]

}

EOT;

?>

①HTML代码：

/*CSS样式*/

<style>table, th , td {  border: 1px solid grey;  border-collapse: collapse;  padding: 5px;}table tr:nth-child(odd) {  background-color: #ccc;}table tr:nth-child(even) {  background-color: #fff;}</style>

/*表格*/

<div ng-app="myApp" ng-controller="customersCtrl">  <table>    <tr ng-repeat="x in names | orderBy : 'Country'">      <td>{{ x.Name }}</td>      <td>{{ x.Country }}</td>    </tr>  </table></div>

/*使用$http接受数据*/

<script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $http) {    $http.get("/try/angularjs/data/Customers_JSON.php")    .then(function (result) {        $scope.names = result.data.records;    });});</script>/*如果你使用的是 v1.5 以下版本，可以使用以下代码： * var app = angular.module('myApp', []); * app.controller('customersCtrl', function($scope, $http) { *    $http.get("/try/angularjs/data/Customers_JSON.php") *    .success(function (response) {$scope.names = response.records;});});*/

②显示序号 ($index)

表格显示序号可以在 <td> 中添加 $index: 

AngularJS 实例

<table>   <tr ng-repeat="x in names">      <td>{{ $index + 1 }}</td>      <td>{{ x.Name }}</td>      <td>{{ x.Country }}</td>   </tr></table>

 

③使用 $even 和 $odd

<table>  <tr ng-repeat="x in names">    <td ng-if="$odd" style="background-color:#ccc">{{ x.Name }}</td>    <td ng-if="$even">{{ x.Name }}</td>    <td ng-if="$odd" style="background-color:#ccc">{{ x.Country }}</td>    <td ng-if="$even">{{ x.Country }}</td>  </tr></table>