AngularJS入门（9）---下拉框

最新推荐文章于 2024-08-01 16:27:33 发布

weixin_43735372

最新推荐文章于 2024-08-01 16:27:33 发布

阅读量1k

点赞数 1

分类专栏：下拉框文章标签： angularJS

本文链接：https://blog.csdn.net/weixin_43735372/article/details/84333474

版权

下拉框专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下拉框

AngularJS 可以使用数组或对象创建一个下拉列表选项

使用 ng-option 创建下拉框

列表项通过对象和数组循环输出，如下实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myContr">
        <select ng-init="selectName=names[0]" ng-model="selectName" ng-options="x for x in names">
        </select>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myContr', function ($scope) {
            $scope.names = ["张森玮", "谭淇蔚", "梁欢欢"];
        });
    </script>
</body>
</html>

注意select标签要写再div里！！！！！

使用 ng-repeat 创建下拉框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myContr">
        <select>
            <option ng-repeat="x in names">{{x}}</option>
        </select>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myContr', function ($scope) {
            $scope.names = ["张森玮", "谭淇蔚", "梁欢欢"];
        });
    </script>
</body>
</html>

注意不要忘记option标签！！！！！

ng-repeat 和 ng-options的比较

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：
使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。
如下实例：
假设我们使用以下对象:

$scope.names = [
    {name : "张森玮", address : "山西长治"},
    {name : "谭淇蔚", address : "山西运城"},
    {name : "梁欢欢", address : "山西运城"}
];

ng-repeat 有局限性，选择的值是一个字符串，如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myContr">
        <select ng-model="selectName">
            <option ng-repeat="x in names" value="{{x.address}}">{{x.name}}</option>
        </select>
        <h1>他们三个饭做的最好吃的是：{{selectName}}</h1>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myContr', function ($scope) {
            $scope.names = [{
                    name: "张森玮",
                    address: "山西长治"
                },
                {
                    name: "谭淇蔚",
                    address: "山西运城"
                },
                {
                    name: "梁欢欢",
                    address: "山西运城"
                }
            ];
        });
    </script>
</body>
</html>

注意select标签里只能放下拉框里的东西，如< $h 1$ >标签就不能放在select里；
ng-repeat加载的是字符串，如果这个字符串对应的对象有多个属性时（name、address）就不能全部加载出来（value只能有一个）

ng-options 选择的是一个对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 <div ng-app="myApp" ng-controller="myContr">
        <select ng-model="selectName" ng-options="x.name for x in names">
        </select>
        <h1>他们三个饭做的最好吃的是：{{selectName.name}}</h1>
        <h1>他来自：{{selectName.address}}</h1>

    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myContr', function ($scope) {
            $scope.names = [{
                    name: "张森玮",
                    address: "山西长治"
                },
                {
                    name: "谭淇蔚",
                    address: "山西运城"
                },
                {
                    name: "梁欢欢",
                    address: "山西运城"
                }
            ];
        });
    </script>
</body>
</html>

注意ng-options的条件“x.name for x in names”,因为取到的是对象，所以可以.name.
当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活

数据源为对象

前面的例子用数组作为数据源，数据对象也可以作为数据源，如下：

$scope.names = {
    name01 : "张森玮",
    name02 : "谭淇蔚",
    name03 : "梁欢欢"
};

ng-options 使用对象有很大的不同
如下所示，使用对象作为数据源, x 为键(key), y 为值(value):：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myContr">
        <select ng-model="selectName" ng-options="x for (x,y) in names"></select><br>
        做饭最好吃的是： <h1>{{selectName}}</h1>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myContr', function ($scope) {
                $scope.names = {
                    name01: "张森玮",
                    name02: "谭淇蔚",
                    name03: "梁欢欢"
                };
            });
        </script>
    </div>
</body>
</html>

上面的例子选择的值是 key-value 对中的 value，
value 在 key-value 对中也可以是个对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 <div ng-app="myApp" ng-controller="myContr">
        <select ng-model="selectName" ng-options="x for (x,y) in names"></select><br>
        <li>你选择的是：{{selectName.name}}</li><br>
        <li>他来自：{{selectName.address}}</li><br>
        <li>他喜欢的颜色是：{{selectName.color}}</li><br>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myContr', function ($scope) {
            $scope.names = {
                name01: {
                    name: "张森玮",
                    address: "山西长治",
                    color: "绿色"
                },
                name02: {
                    name: "谭淇蔚",
                    address: "山西运城",
                    color: "灰色"
                },
                name03: {
                    name: "梁欢欢",
                    address: "山西运城",
                    color: "粉色"
                }
            };
        });
    </script>
</body>
</html>

也可以不使用 key-value 对中的 key , 直接使用对象的属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 <div ng-app="myApp" ng-controller="myContr">
        <select ng-model="selectName" ng-options="y.name for (x,y) in names"></select><br>
        <li>你选择的是：{{selectName.name}}</li><br>
        <li>他来自：{{selectName.address}}</li><br>
        <li>他喜欢的颜色是：{{selectName.color}}</li><br>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myContr', function ($scope) {
            $scope.names = {
                name01: {
                    name: "张森玮",
                    address: "山西长治",
                    color: "绿色"
                },
                name02: {
                    name: "谭淇蔚",
                    address: "山西运城",
                    color: "灰色"
                },
                name03: {
                    name: "梁欢欢",
                    address: "山西运城",
                    color: "粉色"
                }
            };
        });
    </script>
</body>
</html>