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中的原型链深入理解
Feb 24 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
微信小程序 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
PHP 木马攻击防御技巧
2009/06/13 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
js 操作符汇总
2014/11/08 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
jquery实现数字输入框
2017/02/22 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
webpack优化的深入理解
2018/12/10 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python随机生成数模块random使用实例
2015/04/13 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
Python join()函数原理及使用方法
2020/11/14 Python
django中cookiecutter的使用教程
2020/12/03 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
2014年教师节红领巾广播稿
2014/09/10 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js