基于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延迟加载
Mar 09 Javascript
javascript编程起步(第七课)
Jan 10 Javascript
图片上传即时显示缩略图的js代码
May 27 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
Vue的全局过滤器和私有过滤器的实现
Apr 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php自动给网址加上链接的方法
2015/06/02 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
快速查询Python文档方法分享
2017/12/27 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
用Eclipse写python程序
2018/02/10 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
详解Python中的分支和循环结构
2020/02/11 Python
Python内存映射文件读写方式
2020/04/24 Python
python开发一款翻译工具
2020/10/10 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
怎么写好自荐信
2013/10/30 职场文书
历史学专业推荐信
2013/11/06 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
APP界面设计技巧和注意事项
2022/04/29 杂记
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang