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+second}}
  </p>
</div>
<script>
  var app = angular.module("myApp",[]);
  app.controller("myContrl",function($scope){
    $scope.first = 5;
    $scope.second =10;
  });
</script>
</body>
</html>

显示结果为

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

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

解决方法：

<!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>

也能输出正确结果

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

赞 (0)

相关推荐

  • javascript学习笔记(四) Number 数字类型

    toFixed() 方法指定小数位个数 toExponential() 方法 用科学计数法表示数,参数指定小数位个数 toPrecision() 方法自动判断调用toFixed()或toExponential()方法,参数指定所有数的位数 复制代码 代码如下: var num = 99; alert(toFixed(2)); //99.00 alert(toExponential(1)); //9.0e+1 alert(toPrecision(1)); //9.0e+1 alert(toPrec

  • JavaScript判断输入是否为数字类型的方法总结

    JavaScript判断输入是否为数字类型的方法总结 前言 很多时候需要判断一个输入是否位数字,下面简单列举集中方法. 第一种方法 isNaN isNaN 返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字). NaN 即 Not a Number isNaN(numValue) 但是如果numValue果是一个空串或是一个空格,而isNaN是做为数字0进行处理的,而parseInt与parseFloat是返回一个错误消息,这个isNaN检查不严密而导致的. 第二种方法

  • JS如何将数字类型转化为没3个一个逗号的金钱格式

    3345687687876789123 转化为:xxx,xxx,xxx 复制代码 代码如下: <script type="text/javascript"> window.onload = function(){ //整个测试由小刀提供 var testFun = function( callback, str ){ var tipElem = document.createElement( 'div' ), startTime, duration = 0; for( va

  • JS返回只包含数字类型的数组实例分析

    本文实例分析了JS返回只包含数字类型的数组实现方法.分享给大家供大家参考,具体如下: 实现效果如:js123ldka78sdasfgr653 => [123,78,653] 一般做法 分析: 1.循环字符串每个字符,是数字的挑出来拼接在一起,不是数字的,就给他空的拼个逗号 2.将新字符串每一位转换为数组,再次遍历,存在的挑出来,即得到结果 var str="js123ldka78sdasfgr653"; var new_str=""; var arr=[];

  • JavaScript中的Number数字类型学习笔记

    JavaScript中的Number数字类型学习笔记

    使用IEEE754格式来表示整数和浮点数值. 浮点数值:该数值中必须包含一个小数点,并且小数点后面必须至少有一位数字.浮点数值需要内存空间是保存整数值的两倍.最高精度是17为小数,但在进行算术运算时其精度远远不如整数. 各种数值类型:十进制,八进制(在严格模式下无效),十六进制 八进制字面量的第一位必须是0,然后是八进制数字序列(0~7).如果字面值中的数值超出了范围,那么前导0将被忽略,后面的数值将被当做十进制数来解析 070//56 079//79 十六进制字面值的前两位必须是0x,后跟十六

  • JavaScript保存并运算页面中数字类型变量的写法

    之前在html页面嵌入一段如下javascript片段,但是在单击一个按钮的时候会对i值加一,但是两次单击之后,i的初始值没变. 复制代码 代码如下: <script language=javascript>       var i=2; </script> 后来把变量声明在一个test对象里面,如下代码.这样每次变更test.i之后,test.i的值就可以保存下来 复制代码 代码如下: <script language=javascript>       var te

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

    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="myAp

  • C#实现将千分位字符串转换成数字的方法

    本文实例主要实现了C#将千分位字符串转换成数字的方法,对C#初学者而言有一定的借鉴价值,主要内容如下: 主要功能代码如下: /// <summary> /// 将千分位字符串转换成数字 /// 说明:将诸如"–111,222,333的千分位"转换成-111222333数字 /// 若转换失败则返回-1 /// </summary> /// <param name="thousandthStr">需要转换的千分位</param

  • js 字符串转换成数字的三种方法

    方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型返回的都是NaN(Not a Number). 一些示例如下: 复制代码 代码如下: parseInt("1234blue");   //returns   1234parseInt("0xA");  

  • js字符串转换成数字与数字转换成字符串的实现方法

    js字符串转换成数字 将字符串转换成数字,得用到parseInt函数.parseInt(string) : 函数从string的开始解析,返回一个整数. 举例:parseInt('123') : 返回 123(int):parseInt('1234xxx') : 返回 1234(int): 如果解析不到数字,则将返回一个NaN的值,可以用isNaN()函数来检测: 举例 :var i = parseInt('abc');if (isNaN(i)){alert('NaN value');} 同样的

  • 实例分析PHP将字符串转换成数字的方法

    下面给大家介绍PHP将字符串转换成数字的四种方法. 方法1: 使用number_format()函数.number_format()函数用于将字符串转换为数字.它会在成功时返回格式化的数字,否则会在失败时给出E_WARNING. <?php $num = "1000.314"; // 使用number_format()函数将字符串转换为数字 echo number_format($num), "\n"; // 函数的作用是:将字符串转换为数字 echo num

  • AngularJS双向绑定和依赖反转实例详解

    AngularJS双向绑定和依赖反转 一.双向绑定: UI<-->数据 数据->UI (数据改变UI跟着变) UI->数据 (UI改变数据跟着变) 数据改变->UI改变原理: 监听数据是否改变,如果改变更新UI数据. UI改变->数据改变原理: <html> <body> <input type="text" name="name" value="" id="text1&

  • php将字符串全部转换成大写或者小写的方法

    本文实例讲述了php将字符串全部转换成大写或者小写的方法.分享给大家供大家参考.具体分析如下: php中可以通过strtolower和strtoupper两个函数将字符串中的每个英文字符全部转换成小写或者大写 <?php $string = "Learn PHP string functions at jb51.net"; $lower = strtolower($string); $upper = strtoupper($string); print("$lower\

  • PGSQL 实现把字符串转换成double类型(to_number())

    今天写sql的时候,发现PG里有一张表的面积字段竟然设置成字符串类型,这样就不能统计使用sum函数了,所以需要将字符串转换成double类型再相加. select sum(to_number(mj,9999.99)) as amountmj from table group by area 其中9999.99就是不管是mj字段的值还是amountmj的值不能超过9999.99,且保留两位小数. 补充:postgresql科学计数法转浮点或字符串 科学计数法转浮点 select '2.93985E

  • C#将字节数组转换成数字的方法

    本文实例讲述了C#将字节数组转换成数字的方法.分享给大家供大家参考.具体实现方法如下: // Create a decimal from a byte array public static decimal ByteArrayToDecimal (byte[] src) { // Create a MemoryStream containing the byte array using (MemoryStream stream = new MemoryStream(src)) { // Crea

  • Python把对应格式的csv文件转换成字典类型存储脚本的方法

    该脚本是为了结合之前的编写的脚本,来实现数据的比对模块,实现数据的自动化!由于数据格式是定死的,该代码只做参考,有什么问题可以私信我! CSV的数据格式截图如下: readDataToDic.py源代码如下: #coding=utf8 import csv ''' 该模块的主要功能,是根据已有的csv文件, 通过readDataToDicl函数,把csv中对应的部分, 写入字典中,每个字典当当作一条json数据 ''' class GenExceptData(object): def __ini

随机推荐