基于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函数的执行 onload or ready
Dec 12 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
vue实现计步器功能
2019/11/01 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
Python 基础教程之str和repr的详解
2017/08/20 Python
用Python实现随机森林算法的示例
2017/08/24 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Python3几个常见问题的处理方法
2019/02/26 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
网上卖盒饭创业计划书
2014/01/26 职场文书
小班评语大全
2014/05/04 职场文书
关爱残疾人标语
2014/06/25 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
redis数据一致性的实现示例
2022/03/18 Redis