基于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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
axios学习教程全攻略
Mar 26 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
vue通过过滤器实现数据格式化
Jul 20 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自定义的格式化时间示例代码
2013/12/05 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
用cssText批量修改样式
2009/08/29 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
python dataframe astype 字段类型转换方法
2018/04/11 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
用python生成1000个txt文件的方法
2018/10/25 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
年级组长自我鉴定
2014/02/22 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
集中整治工作方案
2014/05/01 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python