ng-options详解

前端之家收集整理的这篇文章主要介绍了ng-options详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<!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>
原文链接:https://www.f2er.com/angularjs/146528.html

猜你在找的Angularjs相关文章