基于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 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
Bootstrap基础学习
Jun 16 Javascript
chrome调试javascript详解
Oct 21 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
php读取html并截取字符串的简单代码
2009/11/30 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
浅谈PHP的反射API
2017/02/26 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
javascript中length属性的探索
2011/07/31 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
Python lambda和Python def区别分析
2014/11/30 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Python多线程原理与用法详解
2018/08/20 Python
python版百度语音识别功能
2019/07/09 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
煤矿班组长竞聘书
2014/03/31 职场文书
企业理念标语
2014/06/09 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
婚庆司仪开场白
2015/05/29 职场文书