AngularJS ng-options下拉菜单绑定数值

这两天做了一个页面,结构比较简单,最上方有两个下拉菜单,选择后点击确定,浏览器会通过AJAX获取数据并在下方生成表格。

因为刚接触AngularJS,最近经常性地陷入某些"陷阱"中 = =

这次遇到的一个问题是,当我写成形如以下格式的时候:

select
  option(ng-repeat="item in itemList" ng-model="choosenItem" value="{{item}}") {{item}}

可以生成下拉菜单,但无论其中的ng-model="choosenItem"还是value="{{item}}",都无法绑定选择的数值,打印出的choosenItem始终是itemList中的第一个值。

这种情况下,我能想到的方法,就是利用item作为option的ID,用原生JS或者jQuery进行取值,这样代码就写得太拙计了。

最终采取的方案是采用ng-options生成下拉菜单:

select(ng-model="choosenItem" ng-options="item for item in itemList")

这样就可以直接将选择的item绑定到ng-model上了,这种写法比前面简单多了。

AngularJS的常用指令一定要掌握全面,不然有时候就会陷入到这种困境,明明有很简单的方法,却要用很丑陋的方式来重新实现一遍。

时间: 2024-10-06 03:29:42

AngularJS ng-options下拉菜单绑定数值的相关文章

下拉菜单绑定代码

<script  type="text/javascript">         var emps = new Array();         emps['人力资源部'] = ['王五','朱军','张三','李四'];         emps['市场部'] = ['刘备', '诸葛亮', '关羽'];         emps['研发部'] = ['李妮','李俊','王明','刘忻'];         function initDep()         {   

关于MVC视图下拉菜单绑定与取值的问题

绑定视图中dropdownlist: 视图中的代码: @Html.DropDownList("select1") 此处的slect1也就是页面上的<select></select>的name和id的属性值 所以在控制器中获取选中的值 Request.Form["select1"] 思路就是这样的,不明白的或有问题的可以留言说明.....

vue+elementui dropdown 下拉菜单绑定方法

方法一:给el-dropdown根组件监听command ,再el-dropdown-item 绑定commandshuxing值. methods内详细写监听对应的方法 handleCommand(command) { if(command == 'loginOut'){ this.$confirm('are you sure loginOut?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'

jquery 实现下拉菜单

Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js  版本不限 : 接下来把=====================html贴出来: Html代码   <div class=”header_menu”> <ul> <li class=”menuli” id=”xtgl_menu”>系统管理</li> <li class=”menuli” id=”ggsq_menu”

DOM(十)使用DOM设置单选按钮、复选框、下拉菜单

1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为ture时,其它的都变为false. 先贴沙漠化一个例子: <script type="text/javascript"> function getChoice() { var oForm = document.forms["uForm1"]; var aCh

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫)   关于该组件的详情参看Bootstrap官网.带下拉菜单的文本框   看到上面的效果图,使我想到WinForm编程中的DropDownList控件.不过,和DropDownList控件相比,还缺少以下内容 1.当点击菜单中的

日期三级下拉菜单

Html 1 <select id="selYear"></select> 2 <select id="selMonth"></select> 3 <select id="selDay"></select> 4 <script src="DateSelector.js"></script> 5 <script type=&qu

省市区县街道四级联动下拉菜单

参考代码: JQuery中国省市区街道三级.四级联动下拉菜单插件 (将代码中单纯的四级联动提取出来,对其中的bug进行了修正,并完善了一些不完美的地方) 先通过最终效果看一下功能: 代码如下: index.html:(注:请将代码中的jquery.min.js替换成你本地的jquery地址) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery四级

Siebel 找字段、下拉菜单设置值、弹出新页面、弹出选择框、设置默认值 、按钮代码

产品缺陷太多,跟用户交互不人性化.例如搜索新建客户功能,用户输入后会自动保存数据,一旦保存后一. 找字段1.简单 CTRL+Q CTRL+Q 服务请求编号----对应的表.字段.长度: 客户编码-----对应的表.字段.长度(弹出新页面):- 点击上面的pick Applet会弹出“选取客户”对话框 有JOIN就不用TABLE:require代表必填 字段有两个值----项目编号 下图确定只有projectNum有用 3.表单中的字段(不在list column中,而是在control) 二.下