Angularjs 双向绑定时字符串的转换成数字类型的问题


Posted in Javascript onJune 12, 2017

问题:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="myApp">
<p ng-controller = "myContrl">结果为 <span ng-bind=""  ></span>
<input type="text" ng-model="first">{{first+second}}
  </p>
</div>
<script>
  var app = angular.module("myApp",[]);
  app.controller("myContrl",function($scope){
    $scope.first = 5;
    $scope.second =10;
  });
</script>
</body>
</html>

显示结果为

Angularjs 双向绑定时字符串的转换成数字类型的问题

但是,我要是输入50,想要结果为60

Angularjs 双向绑定时字符串的转换成数字类型的问题

因为这个是字符串类型需要转换成数字类型

解决方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="myApp">
<p ng-controller = "myContrl">结果为 <span ng-bind=""  ></span>
<input type="text" ng-model="first">{{first *1+second*1}}
  </p>
</div>
<script>
  var app = angular.module("myApp",[]);
  app.controller("myContrl",function($scope){
    $scope.first = 5;
    $scope.second =10;
  });
</script>
</body>
</html>

显示即可正常 即是在 {{first *1+second*1}}显示的时候,转换了一下

或者,启用事件监听

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="myApp">
<p ng-controller = "myContrl">结果为 <span ng-bind=""  ></span>
<input type="text" ng-model="first">{{total}}
  </p>
</div>
<script>
  var app = angular.module("myApp",[]);
  app.controller("myContrl",function($scope){
    $scope.first = 5;
    $scope.second =10;
    $scope.total = parseInt($scope.first)+parseInt($scope.second);
    $scope.$watch(function(){
    return $scope.first;
    },function(newValue,oldValue){
     if(newValue != oldValue){
      $scope.total = parseInt($scope.first)+parseInt($scope.second);
     }
    });
  });
</script>
</body>
</html>

Angularjs 双向绑定时字符串的转换成数字类型的问题

也能输出正确结果

以上所述是小编给大家介绍的Angular js 双向绑定时字符串的转换成数字类型的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
jquery插件validate验证的小例子
May 08 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
详解Vue单元测试case写法
May 24 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 #Javascript
AngularJS 异步解决实现方法
Jun 12 #Javascript
jquery+css实现侧边导航栏效果
Jun 12 #jQuery
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 #Javascript
Vue非父子组件通信详解
Jun 12 #Javascript
详解angularjs 关于ui-router分层使用
Jun 12 #Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 #Javascript
You might like
星际玩家的三大定律
2020/03/04 星际争霸
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
python WindowsError的错误代码详解
2017/07/23 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
交通安全教育制度
2014/02/02 职场文书
护士进修自我鉴定
2014/02/07 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
辩护意见书
2015/06/04 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
Mysql Show Profile
2021/04/05 MySQL
JavaScript canvas实现流星特效
2021/05/20 Javascript
Go timer如何调度
2021/06/09 Golang
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js