基于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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
原生javascript实现分页效果
Apr 21 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 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
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
javascript常用对话框小集
2013/09/13 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
js实现录音上传功能
2019/11/22 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
Python中模块string.py详解
2017/03/12 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
仓库组长岗位职责
2014/01/29 职场文书
销售队伍口号
2014/06/11 职场文书
禁毒宣传标语
2014/06/19 职场文书
简易版租房协议书范本
2014/10/13 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
道歉的话语大全
2015/05/12 职场文书
公司的力量观后感
2015/06/05 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
创业计划书之水果店
2019/07/18 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
对讲机知识
2022/04/07 无线电