基于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+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
js类的继承定义与用法分析
Jun 21 Javascript
vue中实现高德定位功能
Dec 03 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
微信小程序实现多图上传
Jun 19 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
实现“上一页”和“下一页按钮
2006/10/09 PHP
php5.3 废弃函数小结
2010/05/16 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
python爬虫常用的模块分析
2014/08/29 Python
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
python读取与处理netcdf数据方式
2020/02/14 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
护理专科毕业生自荐书范文
2014/02/19 职场文书
医疗纠纷协议书
2014/04/16 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
欢迎标语大全
2014/06/21 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
军训结束新闻稿
2015/07/17 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
小学班级管理心得体会
2016/01/07 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript