码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS: 使用ng-option生成下拉框,添加全部选择项

时间:2014-12-30 17:08:44      阅读:563      评论:0      收藏:0      [点我收藏+]

标签:angular   angularjs   option   unshift   下拉框   

效果图如下:

技术分享

HTML代码:


 <div class="controls  pull-left"> 消费类型:
      <select id="selectType" ng-model="currentType"  ng-options="optiontype.id as optiontype.typeName for optiontype in typemodel">
      </select>
 </div>


实现方法:

1、通过Angular JS的$http请求,动态获取下拉框的选项。

2、使用unshift函数添加全部选项

    self.getConsumTypeList = function () {
        return $http.get("/consumptiontype/listall").success(function (response) {
            $scope.typemodel = response.data;
            $scope.typemodel.unshift({id:null,typeName:'全部'});
        }).error(function (response) {
            $log.debug("请求超时或网络故障!获得列表失败!")
        });
    };

unshift函数介绍:

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。


语法:
arrayObject.unshift(newelement1,newelement2,....,newelementX)
unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。

请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。

注释:unshift() 方法无法在 Internet Explorer 中正确地工作!

提示:要把一个或多个元素添加到数组的尾部,请使用 push() 方法。

AngularJS: 使用ng-option生成下拉框,添加全部选择项

标签:angular   angularjs   option   unshift   下拉框   

原文地址:http://blog.csdn.net/yanjun008/article/details/42267873

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!