Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>label 和 value 具体是什么</title>
    <script src="https://code.angularjs.org/1.3.10/angular.min.js"></script>
    <style type="text/css">
        .mart30{ margin-top: 30px; border-top: 1px solid #000; }
    </style>
</head>
​
<body ng-app="myapp">
    <div ng-controller="mainCtrl">
        <select>
            <!-- 
            value 是存储到数据库中的值，label是显示在页面上的值 
            value 就是 1、2、3、4这些数值；
            lable 是"语文" “数学”这些
    -->
            <option value="1">语文</option>
            <option value="2">数学</option>
            <option value="3">英语</option>
            <option value="4">生物</option>
        </select>
        <div class="mart30">
            <h3>演示 label  和 value 值的变化</h3>
            {{ selectedCity }}
​
            <!-- 这里   c.id as c.city for c in obj   我们使用 obj 对象的 id作为select的value，使用obj 的city 作为 select 的label -->
            <select ng-options="c.id as c.city for c in obj1" ng-model="selectedCity">
            </select>
        </div>
​
    
        <div class="mart30">
            <h3>1. “数组”实现基本下拉</h3>
            <p>语法： laber for value in array</p>
    <select ng-options="animal for animal in arr1" ng-model="selectedAnimal"></select><br>
        </div>
        
        <div class="mart30">
            <h3>2. “包含对象的数组”实现“label 和 value值不同”的下拉</h3>
            <p>语法： select as label for value in array</p>
            <p>哪位同学你认识？你的选择是：{{selectedStu}}</p>
    <select ng-options="c.name as c.id for c in obj2" ng-model="selectedStu"></select>
    <br><br><br>
    <p><strong>自定义下拉显示内容格式</strong></p>
​
    <p>哪位同学你认识？你的选择是：{{selectedStuString}}</p>
    <p>语法：拼接字符串</p>
    <select ng-options="c.name as (c.name +'- 英文名：'+c.id) for c in obj2" ng-model="selectedStuString"></select>
    <br><br><br>
    <p><strong>使用group by对下拉菜单分组</strong></p>
    <p>语法：label group by groupName for value in array</p>
    <p>哪位同学你认识？你的选择是：{{selectedStuString2}}</p>
    <select ng-options="c.name group by c.sex for c in obj2" ng-model="selectedStuString2"></select>
​
        </div>
​
         <div class="mart30">
            <h3>3. “对象”实现基本下拉</h3>
            <p>语法 1：  label for (key , value) in object</p>
            <p>哪个城市？你的选择是：{{scity}}</p>
    <select ng-options="key for (key , value) in obj3" ng-model="scity"></select>
​
    <p>语法 2： select as label for (key ,value) in object</p>
    <p>哪个城市？你的选择是：{{scity01}}</p>
    <select ng-options="value as key for (key , value) in obj3" ng-model="scity01"></select>
        </div>
​
​
    </div>
 <script type="text/javascript">
    var myapp = angular.module('myapp', []);
    myapp.controller('mainCtrl', ['$scope', function($scope) {
         //定义包含对象的数组 obj1
        $scope.obj1 = [
            { "id": "bj", "city": "北京" },
            { "id": "sh", "city": "上海" },
            { "id": "zz", "city": "郑州" }
        ];
        $scope.selectedCity = "bj";
​
        // 定义数组
        $scope.arr1 = [ "大白" , "阿狸" , "熊猫"];
        //定义默认为 “大白”
        $scope.selectedAnimal = "大白";
​
        //定义包含对象的数组 obj2
         $scope.obj2 = [
            { "id": "lilei", "name": "李雷","sex" : "man" },
            { "id": "hanmeimei", "name": "韩梅梅","sex" : "woman" },
            { "id": "jack", "name": "杰克" ,"sex" : "man"}
        ];
        $scope.selectedStu = "韩梅梅";
​
        //定义简单对象 obj3
        $scope.obj3 = {
            "湖北" : "鄂", 
            "广东" : "粤",
            "河南" : "豫"
        };
    }])
    </script>
​
   
</body>
​
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
fighxppro
0viewers