今天在学习AngularJs中使用ng-options指令创建下拉框时遇到点问题,这里总结一下。

  其实,使用ng-options指令创建下拉框很简单,只需要绑定两个属性。

  ng-options指令用于确定下拉列表元素的数组。

  ng-model指令用于获取选定的值。

  这里我直接贴上主要代码:

  

  这里刚开始我是不理解为什么要使用ng-model指令,而且该指令的值似乎是从天而降的,看起来像与其他的毫无关系,其实不然,ng-model指令在这里是用于获取下拉框选定的值。如果去掉ng-model的话,那么下拉框就会创建失败,而对于ng-model的值,可取任意值,当然必须是合法的字符串,否则下拉框创建了,但是无法获取到选定的值。

  最后说一点,使用ng-options指令创建下拉框时,可以省略<option></option>

使用ng-options指令创建下拉框的更多相关文章

  1. AngularJS(二)——常见指令以及下拉框实现

    前言 学完AngularJS,总体上感觉没什么新鲜的东西,但是又感觉每一步都很新鲜,因为没有见过,又因为学到的语法函数和JavaScript差不多,本篇主要介绍一些AngularJS的指令,常见指令和 ...

  2. layui 根据根据后台数据动态创建下拉框并同时默认选中

        第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...

  3. crm使用soap创建下拉框

    //C#代码 //#region OptionMetadataCollection //OptionMetadataCollection opCollection = new OptionMetada ...

  4. javascript实例学习之一——联动下拉框

    经常碰到这样的需求,如省市_城市_乡镇下拉框.后一个下拉框的内容会根据前一个的改变而改变,之前的解决方法往往是在前一个改变的时候,向后台发送请求临时获取对应的内容.这样每触发一次就会网络请求一次,这种 ...

  5. jQuery无限级联下拉框插件

    自己编写jQuery插件 之 无限级联下拉框   因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...

  6. java操作poi生成excel.xlsx(设置下拉框)下载本地和前端下载

    需求:导入excel表格,如果excel有错误,将错误的地方标红,在把数据以excel的形式写出,供用户下载解决方案:1.以实体类的方式接收excel并解析(创建两个集合一个接收正常的数据一个接收错误 ...

  7. vue自定义下拉框组件

    创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...

  8. 通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")

    <html> <head> <meta charset="utf-8"> <title>下拉框</title> < ...

  9. 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...

随机推荐

  1. gitlab 升级

    =============================================== 2017/10/21_第1次修改                       ccb_warlock = ...

  2. django xdmin使用

    我们来看看我们原先django给我们自带的admin后台是什么样子的呢 有人说,你的界面怎么那么丑,我说这个还叫丑吗,他说丑,我说你来,我看看你的,上图 看到登录界面后,我说别看了,我去修改,修改,我 ...

  3. Robot Framework学习笔记(五)------Collections 库

    Collections 库同样为 Robot Framework 标准类库,它所提供的关键字主要用于列表.索引.字典的处理. 1.添加类 在使用之前需要在测试套件(项目)中添加 2.创建字典 字典也是 ...

  4. IntelliJ IDEA2017.3 激活

    网上IntelliJ IDEA激活方式大多均已失效,目前常用激活方式为License Server 激活: http://idea.imsxm.com/ NOTE: 在上周五2017-12-1那天还是 ...

  5. 中文版microbit:TurnipBit显示动态滚动字符教程实例

    随着当今社会的发展,社会的进步,家长们越来越忙碌,致使家长们在孩子成长过程中陪孩子的互动的时间越来越少,为此,TurnipSmart公司制作的一款MicroPython开发板--TurnipBit,这 ...

  6. css条纹背景

    一. 水平条纹 1. 两种颜色: html <div class="stripe"></div> css .stripe{ width: 250px; he ...

  7. Winform跨窗体操作控件(使用委托)

    Winform跨窗体操作控件是winform开发中很常见的形式,最常见且简单有效的方式便是使用委托的方式来进行操作,下面我将通过一个小实例来说明如何使用委托跨窗体实现控件操作. 实例介绍:两个窗体,F ...

  8. 北斗卫星同步时钟(NTP网络时钟服务器)成功投运世界级工程港珠澳大桥

    北斗卫星同步时钟(NTP网络时钟服务器)成功投运世界级工程港珠澳大桥 北斗卫星同步时钟(NTP网络时钟服务器)成功投运世界级工程港珠澳大桥 本文由北京华人开创科技公司提供 原址在 http://www ...

  9. OLEDB数据源

    title: OLEDB数据源 date: 2018-01-12 21:42:37 tags: [OLEDB, 数据库编程, VC++, 数据库] categories: windows 数据库编程 ...

  10. windows 安全模型简介

    操作系统中有些资源是不能由用户代码直接访问的,比如线程进程,文件等等,这些资源必须由系统级代码由RING3层进入到RING0层操作,并且返回一些标识供用户程序使用,一般调用某个函数陷入到内核,这样的函 ...