基于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 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
解读ES6中class关键字
Nov 20 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
js代码实现轮播图
May 04 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获取根域名方法汇总
2014/10/28 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
php工具型代码之印章抠图
2018/07/18 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
深入浅析Python中的yield关键字
2018/01/24 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
用python进行视频剪辑
2020/11/02 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
新媒传信软件测试面试题
2013/02/24 面试题
小学教师节活动方案
2014/01/31 职场文书
七年级政治教学反思
2014/02/03 职场文书
法人授权委托书
2014/09/16 职场文书
勤俭节约主题班会
2015/08/13 职场文书
5道关于python基础 while循环练习题
2021/11/27 Python
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
详解如何使用Nginx解决跨域问题
2022/05/06 Servers