AngularJS 使用ngOption落成下拉列表

按部就班id举办标识

是因为事先的ng-model也正是初始的时候给设定了八个值。当你选拔二个下拉列表选项的时候,就会覆盖掉那么些初叶值。

就此越来越多的时候会动用二个id举办标识,那样在初阶化赋值的时候,只需求设定三个id就足以了。

$scope.engineer = {
                 currentActivityId: 3
             };

             $scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];

命令能够写成下边包车型地铁格式

<select 
       ng-model = "engineer.currentActivityId"
       class="form-control"
       ng-options = "a.id as a.name group by a.type for a in activities" >               
</select >

通过 as 后边的值,就能够规定唯一的四个取舍

图片 1

方方面面代码如下:

图片 2图片 3

<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController" class="container">
        <div class="col-md-12">
        current is: {{ engineer.currentActivityId}}
        </div>
        <div class="col-md-4">
            <label for="name">Choose a new activity:</label>            
            <select 
                ng-model = "engineer.currentActivityId"
                class="form-control"
                ng-options = "a.id as a.name group by a.type for a in activities" >               
            </select > 
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("EngineeringController",["$scope",function($scope){
            $scope.engineer = {
                 currentActivityId: 3
             };

             $scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];
         }]);
    </script>
</body>
</html>

View Code

福寿双全下拉列表的分组

实际分组与前方的例子很像,只要把空间中的ng-options的值换来上边:

<select ng-model = "engineer.currentActivity"
        class="form-control"
        ng-options = "a.name group by a.type for a in activities" >               
</select >

添加 group by
就会鲁人持竿前边的值实行分组

图片 4

总体代码:

图片 5图片 6

<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController" class="container">
        <div class="col-md-12">
        {{engineer.name}} is currently: {{ engineer.currentActivity}}
        </div>
        <div class="col-md-4">
            <label for="name">Choose a new activity:</label>            
            <!-- <select 
            ng-model = "engineer.currentActivity"
            class="form-control"
            ng-options = "a.name +' (' + a.type + ')' for a in activities" >               
            </select >  -->
            <select ng-model = "engineer.currentActivity"
                    class="form-control"
                    ng-options = "a.name group by a.type for a in activities" >               
            </select > 
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("EngineeringController",["$scope",function($scope){
            $scope.engineer = {
                 name: "Dani" ,
                 currentActivity: {
                     id: 3,
                     type: "Work" ,
                     name: "Fixing bugs"
                 }
             };

             $scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];
         }]);
    </script>
</body>
</html>

View Code

日前应用到了ngOption落成下拉选用列表,由于须求贯彻分组等功能,百度了下未有太好的篇章,就百度到壹篇英文的帖子,根据内部的代码很顺遂的化解了。

style=”color: #000080;”>本篇依照文中代码,详细描述下怎么达成下拉列表

style=”color: #ff0000;”>越来越多内容参考:AngularJS知识计算

下拉列表的简约利用

ng-option指令使用很简短,只必要绑定七个本性:

一个是ng-model用于获取选定的值;

另三个是ng-options用于鲜明下拉列表的因素数组。

<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>

上边那条语句便是把选用的值与engineer.currentActivity进行双向数据绑定,然后列表中的选项是activities中的每3个值。数据如下:

$scope.engineer = {
                name: "Dani",
                currentActivity: "Fixing bugs"
            };

            $scope.activities =
            [
                "Writing code",
                "Testing code",
                "Fixing bugs",
                "Dancing"
            ];

运作结果如:

图片 7

为了美貌一点,那里引用了bootstrap。

图片 8图片 9

<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController" class="container">
        <div class="col-md-12">
            {{engineer.name}} is currently: {{ engineer.currentActivity}}
        </div>
        <div class="col-md-4">
            <label for="name">Choose a new activity:</label>
            <select ng-model="engineer.currentActivity" class="form-control"
                    ng-options="act for act in activities">               
            </select>
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("EngineeringController",["$scope",function($scope){
            $scope.engineer = {
                name: "Dani",
                currentActivity: "Fixing bugs"
            };

            $scope.activities =
            [
                "Writing code",
                "Testing code",
                "Fixing bugs",
                "Dancing"
            ];
         }]);
    </script>
</body>
</html>

View Code

参考

Using ngOptions in
AngularJS
:http://odetocode.com/blogs/scott/archive/2013/06/19/using-ngoptions-in-angularjs.aspx

复杂对象,自定义列表名称

有的时候下拉列表并不是单独的字符串数组,大概是json对象,例如:

$scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];

以此时候,绑定的数据就亟须是与那之中的格式相同的数量,比如直接复制在那之中一条:

$scope.engineer = {
                 name: "Dani" ,
                 currentActivity: {
                     id: 3,
                     type: "Work" ,
                     name: "Fixing bugs"
                 }
             };

本来也足以直接钦命成:

$scope.engineer = {currentActivity:activities[3]}

接下来在指令中得以循环列表拼接处下拉框的称谓

<select 
        ng-model = "engineer.currentActivity"
        class="form-control"
        ng-options = "a.name +' (' + a.type + ')' for a in activities" >               
</select > 

运维效果如:

图片 10

1体的代码如下:

图片 11图片 12

<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController" class="container">
        <div class="col-md-12">
        {{engineer.name}} is currently: {{ engineer.currentActivity}}
        </div>
        <div class="col-md-4">
            <label for="name">Choose a new activity:</label>            
            <select 
            ng-model = "engineer.currentActivity"
            class="form-control"
            ng-options = "a.name +' (' + a.type + ')' for a in activities" >               
            </select > 
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("EngineeringController",["$scope",function($scope){
            $scope.engineer = {
                 name: "Dani" ,
                 currentActivity: {
                     id: 3,
                     type: "Work" ,
                     name: "Fixing bugs"
                 }
             };

             $scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];
         }]);
    </script>
</body>
</html>

View Code

相关文章