ng-options详解

最新推荐文章于 2019-04-02 17:42:07 发布

醉小义

最新推荐文章于 2019-04-02 17:42:07 发布

阅读量927

点赞数

分类专栏： angularjs 文章标签： angularjs ng-options

本文链接：https://blog.csdn.net/qq_30638831/article/details/76916872

版权

angularjs 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('myControl',['$scope',function($scope){
            $scope.colors =[
                {name:'black',shade:'dark'},
                {name:'white',shade:'light'},
                {name:'red',shade:'blood'},
                {name:'yellow',shade:'banana'}
            ];

            $scope.object = {
                dark:'black',
                light:'white',
                banana:'yellow'

            };



            $scope.buttonFun = function(){
                alert($scope.myColor2);
            }
        }]);





    </script>


</head>
<body ng-app="myApp" ng-controller="myControl">
    <!--label for value in array-->
    <!--解析的代码： <option value="object:6" label="yellow">yellow</option>-->
    <!--
        注意:ng-model中值存放的是color对象，不是每一个属性，就是控制器中的每一条数据 ***********
    -->
    <select ng-model="myColor1" ng-options="color.name for color in colors"></select> {{myColor1.name + ":"  +myColor1.shade}}<br />
    <!-- select as label for value in array-->
    <!--<option value="blood" label="red">red</option>--> <!--  value的值  as  text中的值  for item in 数组对象  -->
    <select ng-model="myColor2"  ng-change="buttonFun()"  ng-options="color.shade as color.name for color in colors"></select> <br />

    <!-- label group by group for value in array-->
    <!--
    <optgroup label="dark">
         <option value="3" label="black">black</option>
    </optgroup>

    text文本 group by 显示的文本 for item in 数组对象
    -->
    <select ng-model="myColor3" ng-options="color.name group by color.shade for color in colors"></select><br />

    <!--label for (key , value) in object-->
    <select ng-model="myObj1" ng-options="key for (key,value) in object"></select><br />

    <!--label group by group for (key, value) in object-->
    <select ng-model="myObj2" ng-options="key group by value for (key,value) in object">
        <option value="">--make choice--</option>
    </select><br />

</body>
</html>

醉小义

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ng-options详解

Title var app = angular.module('myApp',[]); app.controller('myControl',['$scope',function($scope){ $scope.colors =[ {name:'black',shade:'dark'},
复制链接

扫一扫

专栏目录