问题：

<!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 双向绑定时字符串的转换成 数字类型的问题的更多相关文章

  1. Swift - 将String类型的数字转换成数字类型

    Swift中,如果要把字符串转换成数字类型(比如整型,浮点型等).可以先转成NSString类型,让后再转. 1 2 3 4 //将文本框中的值转换成数字 var i = (tf1.text as N ...

  2. Swift - 将String类型的数字转换成数字类型（支持十进制、十六进制）

    1,十进制的字符串转成数字 Swift中,如果要把字符串转换成数字类型(比如整型,浮点型等).可以先转成NSString类型,让后再转. 1 2 3 4 //将文本框中的值转换成数字 var i = ...

  3. [C#]将千分位字符串转换成数字

    关键代码: /// <summary> /// 将千分位字符串转换成数字 /// 说明:将诸如"–111,222,333的千分位"转换成-111222333数字 /// ...

  4. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  5. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

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

    在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形 ...

  7. js 字符串转换成数字(转)

    转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型返回的 ...

  8. JavaScript进阶(四)js字符串转换成数字的三种方法

    js字符串转换成数字的三种方法 在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b. ...

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

    转载:点击查看地址 js字符串转换成数字 将字符串转换成数字,得用到parseInt函数.parseInt(string) : 函数从string的开始解析,返回一个整数. 举例:parseInt(' ...

随机推荐

  1. Javascript 连接两个数组

    JS合并两个数组的方法 我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合 ...

  2. C++_类和动态内存分配2-改进后的String类

    添加前面介绍过的复制构造函数和赋值运算符,使类能够正确管理类对象使用的内存. 知道对象何时被创建和释放. =================================== 修订后的默认构造函数 ...

  3. Linux系统下Qt环境搭建

    http://www.linuxidc.com/Linux/2013-07/87576.htm 主要是需要提前安装一些动态库,否则编译的时候会出现 /usr/bin/ld: cannot find - ...

  4. HDU_1028 Ignatius and the Princess III 【母函数的应用之整数拆分】

    题目: "Well, it seems the first problem is too easy. I will let you know how foolish you are late ...

  5. Magic Odd Square （思维+构造）

    Find an n × n matrix with different numbers from 1 to n2, so the sum in each row, column and both ma ...

  6. 洛谷 P3239 / loj 2112 [HNOI2015] 亚瑟王 题解【期望】【DP】

    ???看不懂的期望DP 题目描述 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑. 他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂亮.众所周知,亚 ...

  7. 119th LeetCode Weekly Contest K Closest Points to Origin

    We have a list of points on the plane.  Find the K closest points to the origin (0, 0). (Here, the d ...

  8. BZOJ - 1026 数位DP

    中文题面,注意st是不可以放到dp里面的,否则每次solve都要清零 注意状态的转移要st&&i==0,因为子结构也可能是st(当高位取0时) 而st是必然合法的 #include&l ...

  9. phpcms V9 框架目录结构

    phpcms v9框架的目录结构分析:      了解v9框架的目录结构,有助于帮助我们快速建立起对v9框架的一个整体认识 打开"mycms"项目,有如下文件和目录      使用 ...

  10. win7和centos7双系统--转

    转自http://blog.chinaunix.net/uid-30867756-id-5758575.html 参考:http://blog.csdn.net/hsg77/article/detai ...