基于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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
微信小程序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实现监听事件
2013/11/06 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
Python with的用法
2014/08/22 Python
详解Python中DOM方法的动态性
2015/04/11 Python
Python去除字符串两端空格的方法
2015/05/21 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
python提取xml里面的链接源码详解
2019/10/15 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python定时截屏实现
2020/11/02 Python
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
会计岗位职责
2013/11/08 职场文书
厨师长岗位职责
2014/03/02 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
JavaScript实现简单计时器
2021/06/22 Javascript
python如何读取和存储dict()与.json格式文件
2022/06/25 Python