AngularJS学习篇(十)

AngularJS Select(选择框)

运用 ng-options 创立选用框

在 AngularJS
中我们能够动用 ng-option 指令来创建四个下拉列表,列表项通过对象和数组循环输出,如下实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
   <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl',function ($scope) {
        $scope.names=['google','baidu','tengxun'];
    })
</script>
</body>
</html>

ng-init 开端值,ng-options=”x for x in names”读取数组

选拔 ng-repeat 创设接纳框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
   <select>
       <option ng-repeat="x in names">{{x}}</option>
   </select>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl',function ($scope) {
        $scope.names=['google','baidu','tengxun'];
    })
</script>
</body>
</html>

ng-repeat 指令是透过数组来循环 HTML
代码来创建下拉列表,但 AngularJS,ng-options 指令更符合创设下拉列表,它有以下优势:

使用 ng-options 的精选是三个对象, ng-repeat 是3个字符串。当选拔值是1个指标时,我们就足以收获更加多消息,应用也更灵敏。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
   <select ng-model="selectedSite">
       <option ng-repeat="x in names" value="{{x.url}}">{{x.site}}</option>
   </select>

    <h1>你选择的是: {{selectedSite}}</h1>   
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl',function ($scope) {
        $scope.names=[ {site : "Google", url : "http://www.google.com"},
            {site : "Runoob", url : "http://www.runoob.com"},
            {site : "Taobao", url : "http://www.taobao.com"}];
    })
</script>
</body>
</html>

你挑选的是: http://www.runoob.com—-&gt;字符串

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
   <select ng-model="selectedSite" ng-options="x.site for x in names">
   </select>

    <h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl',function ($scope) {
        $scope.names=[ {site : "Google", url : "http://www.google.com"},
            {site : "Runoob", url : "http://www.runoob.com"},
            {site : "Taobao", url : "http://www.taobao.com"}];
    })
</script>
</body>
</html>

你挑选的是: {“site”:”谷歌”,”url”:”http://www.google.com"}—-&gt;对象

 

数据源为对象

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
   <select ng-model="selectedSite" ng-options="x for (x,y) in names">
   </select>

    <h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl',function ($scope) {
        $scope.names= {site1 : "Google", site2 : "http://www.google.com"};
    })
</script>
</body>
</html>

你挑选的是: 谷歌

你挑选的值为在 key-value 对中的 value

 

value 在 key-value 对中也能够是个目的:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
   <select ng-model="selectedSite" ng-options="x for (x,y) in names">
   </select>

    <h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl',function ($scope) {
        $scope.names= {car01 : {brand : "Ford", model : "Mustang", color : "red"},
            car02 : {brand : "Fiat", model : "500", color : "white"},
            car03 : {brand : "Volvo", model : "XC90", color : "black"}};
    })
</script>
</body>
</html>

你挑选的是: {“brand”:”Ford”,”model”:”迈凯伦600LT 8″,”color”:”red”}

 

在下拉菜单也得以不行使 key-value 对中的 key ,
直接使用对象的脾气,可是选取依然value:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
   <select ng-model="selectedSite" ng-options="y.brand for (x,y) in names">
   </select>

    <h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl',function ($scope) {
        $scope.names= {car01 : {brand : "Ford", model : "Mustang", color : "red"},
            car02 : {brand : "Fiat", model : "500", color : "white"},
            car03 : {brand : "Volvo", model : "XC90", color : "black"}};
    })
</script>
</body>
</html>

您挑选的是: {“brand”:”Ford”,”model”:”丰田86″,”color”:”red”}

 

相关文章