基于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 相关文章推荐
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
Openlayers实现地图的基本操作
Sep 28 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桌面中心(三) 修改数据库
2007/03/11 PHP
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php 字符转义 注意事项
2009/05/27 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
js计时事件实现圆形时钟
2020/03/25 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
Python 递归函数详解及实例
2016/12/27 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Python中zip函数如何使用
2020/06/04 Python
python绘制汉诺塔
2021/03/01 Python
纪检干部对照检查材料
2014/08/22 职场文书
法人代表证明书
2014/09/18 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
陪护人员误工证明
2015/06/24 职场文书