给select绑定ng-model时,经常会出现首选第一个option值是undefined。如图,

源代码

  <select ng-model="newSupplier.companytype">
<option value="A">A类货源供应商</option>
<option value="B" ng-selected="newSupplier.companytype=='B'">B类货源供应商</option>
</select>

主要原因是:ng-model绑定的值“newSupplier.companytype”没有初始值。浏览器自动解析为undefined。

浏览器解析代码:

<select ng-model="newSupplier.companytype" class="ng-pristine ng-valid">
  <option value="? undefined:undefined ?"></option>
<option value="A">A类货源供应商</option>
<option value="B" ng-selected="newSupplier.companytype=='B'">B类货源供应商</option>
</select>

解决办法:

只要在js文件中,初始化ng-model所绑定的值即可。

$scope.newSupplier.companytype='B';

另外,ng-selected可以帮助自动指定默认选中项。

关于ng-selected和ng-option以及ng-repeat,待补充。

angularJS--ngSelect的更多相关文章

  1. angularjs: ng-select和ng-options

    angular.js有一个很强大的指令: ng-select 它可以帮助你通过数据模型来创建select元素.它很好的支持了select标签的语法,但是却有点坑. 假设有如下一段json数据: { & ...

  2. angularjs ng-select ng-options 默认选中项.

    <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf- ...

  3. [Angularjs]系列——学习与实践

    写在前面 这个系列是来这家公司到现在,边用边学,以及在工作中遇到的问题进行的总结.深入的东西不多,大多是实际开发中用到的东西. 这里做一个目录,方便查看. 系列文章 [Angularjs]ng-sel ...

  4. [Angularjs]视图和路由(四)

    写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...

  5. [Angularjs]ng-show和ng-hide

    写在前面 上篇文章介绍了ng-select和ng-options指令的使用,这篇文章继续指令的学习,本篇文章讲学习ng-show和ng-hide指令. 系列文章 [Angularjs]ng-selec ...

  6. [Angularjs]视图和路由(一)

    写在前面 对单页应用来讲,视图和路由的作用可以从一个视图跳转到另外一个视图,可以合理管理用户在使用过程中看到的界面. 将视图分解成布局和模版视图,并且根据用户当前访问的URL来展示对应的视图,将会是一 ...

  7. [Angularjs]视图和路由(二)

    写在前面 上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-opt ...

  8. [Angularjs]视图和路由(三)

    写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...

  9. [Angularjs]ng-class,ng-class-even,ng-class-odd

    写在前面 最近在通过angularjs将数据绑定到前端,其中也涉及到很多新的东西,一些效果还是很有必要实现的.在使用中发现ng-class,ng-class-even.ng-class-odd的使用, ...

  10. [Angularjs]单页应用之分页

    写在前面 在项目中,用到单页应用的分页,当时想到使用滚动加载的方案,可是几次尝试都没配置成功,闲着无聊就弄了一个demo. 系列文章 [Angularjs]ng-select和ng-options [ ...

随机推荐

  1. Qt 环境下MAPX组件的编程

    使用mapx打包文件可以方便的迅速开发,今天介绍一种不使用打包文件,直接使用mapx组件的编程方法. 就像之前介绍flash控件编程的方法,首先建立一个qt demo.基于那个的窗口都可以. 本den ...

  2. Android自动化学习笔记:编写MonkeyRunner脚本的几种方式

    ---------------------------------------------------------------------------------------------------- ...

  3. Java-生成指定长度验证码的一种简单思路

     前言:以前做过的一个项目,刚开的时候始验证码是在前端生成前端验证的,后来觉得不靠谱,另外就是找回密码的功能也需要发送邮件和短信的验证码,所以,验证码就必须在后端生成并且保存到应用会话中才行了!所以, ...

  4. android bundle存放数据详解

    转载自:android bundle存放数据详解 正如大家所知道,Activity之间传递数据,是将数据存放在Intent或者Bundle中 例如: 将数据存放倒Intent中传递: 将数据放到Bun ...

  5. leetcode-【中等题】3. Longest Substring Without Repeating Characters

    题目: Given a string, find the length of the longest substring without repeating characters. Examples: ...

  6. git Could not read from remote repository 解决

    错误: fatal: 'origin' does not appear to be a git repository fatal: Could not read from remote reposit ...

  7. OpenLayers Map理解

    1,视口坐标的原点在左上角,水平向右为x轴正向,垂直向下为y 轴正向:2,地图坐标原点为初始图层的中心点,水平向右为x轴正向,垂直向上为y轴正向:3,视口中心点永远与地图中心点重合,不一定与瓦片中心点 ...

  8. linux 命令总结

    ①用find命令查找并删除文件 用脚本创建测试数据: [root@greymouster ceshidata]# for n in `seq 10`> do > date -s " ...

  9. linux chmod 755

    chmod是Linux下设置文件权限的命令,后面的数字表示不同用户或用户组的权限. 一般是三个数字: 第一个数字表示文件所有者的权限 第二个数字表示与文件所有者同属一个用户组的其他用户的权限 第三个数 ...

  10. XidianOJ 1063 Chemistry Problem

    [提交][状态][讨论版] 题目描述 lw最近正在学习立体化学.立体化学中常用Fischer投影式表示分子的立体构型,例如,对于酒石酸HOOC(CHOH)2COOH,如果用一根横线表示羟基,略去氢原子 ...