angular ng-options的使用

時間 2019-11-12

原文原文鏈接

angular中的ng-options的的使用跟ng-repeat有些相似html

實例代碼可複製到本地運行web

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>angular_select使用</title>
    <script src="http://zhouwei007.web3v.com/js/angular.js"></script>
</head>
<body ng-controller="myCrtl">
    <div>基本下拉框</div>
    <select ng-model="seleted" ng-options="a.name for a in animals">
        <option value="">請選擇你的萌寵</option>
    </select>
    <div>自定義每一個option選項的內容</div>
    <br/>
    <select ng-model="seleted" ng-options="(a.name + '愛吃' + a.food) for a in animals">
        <option value="">請選擇你的萌寵</option>
    </select>
    <br/>
    <div>根據每一個條件分組</div>
    <br/>
    <select ng-model="seleted" ng-options="(a.name + '的愛好是' + a.favor) group by a.sex for a in animals">
        <option value="">請選擇你的萌寵</option>
    </select>
    <br/>
    <br>
    <div>自定義ng-model值，雖然option的內容是選項值，可是你的去獲取ng-model的值的時候就是你自定義的值</div>
    <select ng-model="seleted" ng-options="a.id as a.name for a in animals" id="seleted">
        <option value="">請選擇你的萌寵</option>
    </select>
</body>
<script>
    var app=angular.module('App',[]);
    app.controller('myCrtl',function($scope){
        $scope.seleted = '';
        $scope.animals = [
            {
                id: '00001',
                name: '貓',
                sex: '雌',
                food: '魚',
                favor: '玩球'
            },
            {
                id: '00002',
                name: '狗',
                sex: '雄',
                food: '骨頭',
                favor: '接盤子'
            },
            {
                id: '00003',
                name: '兔',
                sex: '雌',
                food: '胡蘿蔔',
                favor: '刨洞'
            },
            {
                id: '00004',
                name: '獅',
                sex: '雄',
                food: '肉',
                favor: '獵物'
            }
        ];
    })
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。