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

效果图如下:

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() 方法。

时间: 2024-10-13 21:30:22

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

下拉框里根据选择项不同,显示的图片也不同

function change(){                var photo = document.getElementById("photo");                var photoImg = document.getElementById("photoImg");                photoImg.src = photo.value;            } <select name="photo"

easyUI中select下拉框添加option选项

使用jquery easyui的下拉列表combobox碰上问题,下拉列表的项都是从 数据库读出来的,然后我想在动态生成的项中添加一项:"<option value=''>=全部=</option>". 但怎么也添加不成功. 首先试了直接用jquery对该下拉列表进行添加操作: JavaScript code ? 1 2 3 4 5 6 7 8 $('#selUnin').combobox({         url: _callback_url + '&

关于下拉框列表不可选择相同值的设置一:当前DOM不可选

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>测试-当前元素不可选</title><style> .ipt { border: 1px solid #ddd; box-shadow: 0 0 3px rgba(0, 0, 0, 0.17) inset; transition: border 0.

iOS开发——UI篇&amp;下拉弹出列表选择项效果

下拉弹出列表选择项效果 右边菜单中的按键,点击弹出一个列表可选择,选择其中一个,响应相应的事件并把文字显示在右边的菜单上:弹出下拉效果使用LMDropdownView插件,可以用POD进行加载pod ‘LMDropdownView’:LMDropdownView是把想要的视图赋给它: 源代码地址:https://github.com/JxbSir/YiYuanYunGou 效果如下: 1:在主页面先定义按键跟绑定视图(没写全的都是属性中定义了比如btnRigth,dropdownView等):

ASP.NET MVC 中枚举生成下拉框

最近公司在开发财务系统,在工作中遇到不少的地方需要下拉框. 但是枚举框中数据的内容又来自枚举. 枚举代码如下: 1 public class EnumDemo 2 { 3 4 public enum Value { 5 First=1, 6 Second=2 7 } 8 public enum Name 9 { 10 我是第一 = 1, 11 我是第二 = 2 12 } 13 14 15 16 } 我一看还挺简单. 于是第一次是这样的: 1 <select> 2 <option valu

maven一模块字段调用另一个模块数据生成下拉框

店铺运营数据录入表实现的下拉框实现 从片区管理中提取分区数据,在招商管理(MIS)模块中获取并以下拉框的形式展现 ctrl类: 1.首先在ctrl类注入需提取另一模块字段的serviceclient接口类 2.编写begin()方法,提取数据 3.begin()方法调用一转化Json方法:  4.在进入页面index()方法中调用begin方法: 页面  .ftl  文件: 1.注入model 2.页面显示  3.弹框中下拉框字段 4.查看详情弹框 结果显示:

JS为Select下拉框添加输入功能

JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于select之上,再使用JS将下拉框的值赋值给input,实际上是用input模拟出了select的功能,思路非常新颖,也不知究竟有多少人须要select可输入文字的功能,以下是具体的实现代码:前端资源分享 .代码   <div style="position:relative;">

关于下拉框列表不可选择相同值的设置二:重置前一项相同选择

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>测试-重置前一项相同选择</title> <style> .ipt { border: 1px solid #ddd; box-shadow: 0 0 3px rgba(0, 0, 0, 0.17) inset; transition: border

下拉框&lt;select&gt;设置选中项的一个问题

基于jQuery,有两种方式设置下拉 1.$("select").val(); 2.$("option:eq(1)").attr("selected","selected"); 方法2有个问题就是只能设置一次下拉框,重复调用设置失效 <script> $(function(){ }); function sltOpt(){ $("select").val(1); } function sltOp