基于AngularJs select绑定数字类型的问题

 更新时间:2018年10月08日 08:52:59   作者:天马3798  
今天小编就为大家分享一篇基于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绑定数字类型的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解创建自定义的Angular Schematics

    详解创建自定义的Angular Schematics

    本文对 Angular Schematics 进行了介绍,并创建了一个用于创建自定义 Component 的 Schematics ,然后在 Angular 项目中以它为模板演练了通过 Schematics 添加自定义的 Component,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • AngularJS中的路由使用及实现代码

    AngularJS中的路由使用及实现代码

    本篇文章主要介绍了AngularJS中的路由使用及实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 详解AngularJs中$resource和restfu服务端数据交互

    详解AngularJs中$resource和restfu服务端数据交互

    之前小编和大家分享过使用$http同服务器进行通信,但是功能上比较简单,angularjs还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。下面来一起看看吧。
    2016-09-09
  • 详谈angularjs中路由页面强制更新的问题

    详谈angularjs中路由页面强制更新的问题

    下面小编就为大家带来一篇详谈angularjs中路由页面强制更新的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • indexedDB bootstrap angularjs之 MVC DOMO (应用示例)

    indexedDB bootstrap angularjs之 MVC DOMO (应用示例)

    这篇文章主要介绍了indexedDB bootstrap angularjs之 MVC DOMO (应用示例)的相关资料,需要的朋友可以参考下
    2016-06-06
  • angular6开发steps步骤条组件

    angular6开发steps步骤条组件

    这篇文章主要为大家详细介绍了angular6开发steps步骤条组件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • angular4中关于表单的校验示例

    angular4中关于表单的校验示例

    本篇文章主要介绍了angular4中关于表单的校验示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 解决Angular2 router.navigate刷新页面的问题

    解决Angular2 router.navigate刷新页面的问题

    今天小编就为大家分享一篇解决Angular2 router.navigate刷新页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Angular 应用技巧总结

    Angular 应用技巧总结

    这篇文章总结了一些Angular的应用技巧,都是在实际项目中应用了的,感觉对于使用Angular还是有一些帮助的,有需要的小伙伴可以参考下
    2016-09-09
  • 详解@angular/cli 改变默认启动端口两种方式

    详解@angular/cli 改变默认启动端口两种方式

    这篇文章主要介绍了详解@angular/cli 改变默认启动端口两种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论