基于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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
JS判断数组那点事
Oct 10 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
如何使用vue3打造一个物料库
May 08 Vue.js
微信小程序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实现图象锐化代码
2007/06/14 PHP
PHP操作xml代码
2010/06/17 PHP
PHP 面向对象详解
2012/09/13 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
Python写的服务监控程序实例
2015/01/31 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
遗传算法之Python实现代码
2017/10/10 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
Python 读取位于包中的数据文件
2020/08/07 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
Python tkinter实现日期选择器
2021/02/22 Python
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
旅游专业职业生涯规划范文
2014/01/13 职场文书
颁奖典礼主持词
2014/03/25 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
婚宴领导致辞
2015/07/28 职场文书