深究AngularJS——下拉框（selected）

最新推荐文章于 2022-08-17 16:29:39 发布

bug师姐

最新推荐文章于 2022-08-17 16:29:39 发布

阅读量1.6w

点赞数 2

分类专栏： AngularJS angularJS应用详解文章标签： angularjs 下拉框 ng-repeat ng-options

本文链接：https://blog.csdn.net/zcl_love_wx/article/details/51393382

版权

AngularJS 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

angularJS应用详解

14 篇文章 23 订阅

订阅专栏

即使写一个下拉框，也会有多种情况，我这里讲讲我遇到过的。

1. 将值写死的情况：

<body>
<div ng-app="myApp" ng-controller="myCtrl" >
    <select ng-model="adStyle"  ng-change="look();" >
        <option value="0">全部广告类型</option>
        <option value="1">图片广告</option>
        <option value="2">图音视广告</option>        
    </select> 
</div>
<script>    
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.look = function(){          
            alert($scope.adStyle)
        }       
    });
</script>
</body>

运行上面代码时，会发现下拉框里空白，什么也没有，但当我们点击下拉框时，却发现里面有值，这是为什么呢？这是因为我们还需要给下拉框一个默认选中项，我们只需在控制器里初始化时给一个值即可，如：$scope.adStyle = "0";

2. option是动态变化的情况

1.使用ng-options

<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="model" ng-options="x for x in names">
        <option value="">所有人</option> <!-- 不加这句代码，会出现空白 -->
    </select>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.names = ["张三", "李四", "王二"];
    });
</script>
</body>

2. 使用ng-repeat：

这种方式，option的value值跟内容都是一样的，但这种情况不会出现空白

<div ng-app="myApp" ng-controller="myCtrl">
    <select>
    <option ng-repeat="x in names">{{x}}</option>
    </select>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.names = ["图片广告", "音频广告", "视频广告"];
    });
</script>
</body>

3.使用ng-options选择的是对象，而ng-repeat选择的是字符串

ng-repeat示例：

<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="selectModel">
        <option value="">所有人</option> <!-- 没有这句代码，会出现空白 -->
        <option ng-repeat="x in formData" value="{{x.content}}">{{x.name}}</option>     
    </select>
    <h1>你选择的将是一个vlaue对应的字符串: {{selectModel}}</h1>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
       $scope.formData = [
            {name : "张三", content : "我有病"},
            {name : "李四", content : "我有药"},
            {name : "王二", content : "我啥也没有"}
        ];
    });
</script>
</body>

ng-options示例：

<!-- ng-options="x.name for x in formData"里x.name的结果就会是optoin标签之间的内容，而不是value值，value值默认是对象 -->
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="selectModel" ng-options="x.name for x in formData">
        <option value="">所有人</option> <!-- 没有这句代码，会出现空白 -->
    </select>

    <h1>你选择的是: {{selectModel.name}}</h1>
    <p>内容是: {{selectModel.content}}</p>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
       $scope.formData = [
            {name : "张三", content : "我有病"},
            {name : "李四", content : "我有药"},
            {name : "王二", content : "我啥也没有"}
        ];
    });
</script>
</body>

有人就会看不明白，怎么就ng-options是选择的对象了？是这样的，从上面例子可看出，在ng-repeat里，只能{{selectModel}}这样写，且显示的是vlaue值；而在ng-options里，可{{selectModel}}这样写，可{{selectModel.name}}，亦可{{selectModel.content}}这样写，这就说明了此时被选中的对应的是一个对象。

4.标签的value值和之间的内容都是对象里的值的情况

既然是对象，我们当然得选用ng-options。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
    <!-- 我们需要将ID设为value值，shortName设为option标签之间的内容
    重点是：ng-options="item.channelId as item.shortName for item in channelList"这个写法-->
    <select ng-model="formData.channelId" ng-options="item.channelId as item.shortName for item in channelList">
      <option value="">全部渠道</option><!-- 替换空白-->
    </select>
    你选择的渠道对应的ID是:{{formData.channelId}}
</div>
<script>    
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.channelList=[{"channelId":1,"shortName":"张三"},{"channelId":2,"shortName":"李四"}]
    });
</script>
</body>
</html>

bug师姐

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
深究AngularJS——下拉框（selected）

即使写一个下拉框，也会有多种情况，我这里讲讲我遇到过的。1. 将值写死的情况：<body><div ng-app="myApp" ng-controller="myCtrl" > <select ng-model="adStyle" ng-change="look();" > <option value="0">全部广告类型</option> <optio
复制链接

扫一扫