今天小编就为大家分享一篇基于AngularJs select绑定数字类型的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

一、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绑定数字类型的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
俞军关于企业本质的读书思考

俞军关于企业本质的读

什么是组织?组织,是有共同目标、共同理念、共同知识,一定
还没凉透的VR,5G时代会迎来春天吗?

还没凉透的VR,5G时代会

VR的迭代周期与更新换代速度远远达不上智能手机的速度
他们说ofo没了,但是我想救救看

他们说ofo没了,但是我

直到有一天,OFO的押金提不出来了。我发现我的人生跌入
化学家的梦想:让化工更绿色不再有污染

化学家的梦想:让化工更

化妆品、日用品、医药、染料,这些在大家日常生活中离不
谷歌部署AI系统“垃圾视频分类器”:净化YouTube主页

谷歌部署AI系统“垃圾

彭博社指出,YouTube上充斥着带有极端与误导性内容的视
传Snapchat员工滥用内部工具 获取位置数据等信息

传Snapchat员工滥用内

Snap的前员工表示,几年前有“多名”Snap员工通过不当方
最新文章
JavaScript解析及序列化JSON的方法实例分析

JavaScript解析及序列

这篇文章主要介绍了JavaScript解析及序列化JSON的方法
如何为vuex实现带参数的 getter和state.commit

如何为vuex实现带参数

这篇文章主要介绍了如何为vuex实现带参数的getter和st
使用VUE+iView+.Net Core上传图片的方法示例

使用VUE+iView+.Net C

这篇文章主要介绍了使用VUE+iView+.Net Core上传图片
JS实现的获取银行卡号归属地及银行卡类型操作示例

JS实现的获取银行卡号

这篇文章主要介绍了JS实现的获取银行卡号归属地及银行
Angular6 用户自定义标签开发的实现方法

Angular6 用户自定义

这篇文章主要介绍了Angular6 用户自定义标签开发的实
React 实现拖拽功能的示例代码

React 实现拖拽功能的

这篇文章主要介绍了React 实现拖拽功能的示例代码,小编