基于AngularJs select绑定数字类型的问题


Posted in Javascript onOctober 08, 2018

一、AngularJs中select绑定ng-model数字类型绑定问题

使用ng-model绑定select的时候默认是string字符串,如果指定的number值会绑定失败

举例说明:

<body ng-app='module' ng-controller="myCtrl">
 请选择性别:
 <select name="sex" ng-model='sex' > 
  <option value="">请选择</option>
  <option value="1">男</option>
  <option value="2">女</option>
 </select>
 <button type="" ng-click="alter();">修改</button>
 </form>
 <script>
 (function() {
 'use strict';
 var app= angular.module('module', [
 ]);
 app.controller('myCtrl',function($scope){
  $scope.sex="1"; //特别说明,此处指定的为字符串,如果是number类型则绑定不成功
  console.info($scope);
  $scope.alter=function(){
  $scope.sex="2";
  console.info($scope);
  }
 });
 })();
 </script

指定数值类型,绑定失败

app.controller('myCtrl',function($scope){
 $scope.sex=1; //特别说明,此处指定的为字符串,如果是number类型则绑定不成功
 $scope.alter=function(){
 $scope.sex=2;
 console.info($scope);
 }
});

解决方案:

请选择性别:
<select name="sex" ng-model='sex' ng-options='x.id as x.name for x in [{id:1,name:"男"},{id:2,name:"女"}]'> 
<option value="">请选择</option>
</select>
<button type="" ng-click="alter();">修改</button>

如果不一定非得number类型,在修改$scope的时候指定string类型就行了。

以上这篇基于AngularJs select绑定数字类型的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
jquery each()源代码
Feb 14 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
微信小程序wx:for循环的实例详解
Oct 07 #Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 #Javascript
Vue面试题及Vue知识点整理
Oct 07 #Javascript
解决vue无法设置滚动位置的问题
Oct 07 #Javascript
cdn模式下vue的基本用法详解
Oct 07 #Javascript
vue实现添加与删除图书功能
Oct 07 #Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 #Javascript
You might like
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
微信小程序合法域名配置方法
2019/05/06 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
如何利用Fabric自动化你的任务
2016/10/20 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python绘图实现显示中文
2019/12/04 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
2015年教师节演讲稿范文
2015/03/19 职场文书
红色经典电影观后感
2015/06/18 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
微信早安问候语
2015/11/10 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL