问题：

<!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. SQL Server2012如何更改服务器的名称

    Problem: sql server 2012 安装完毕后,连接数据库只能使用 机器名\数据库实例 的方式,想用 localhost 或 . 作为服务器名称不可以 Solution: 参考:http ...

  2. 一些英文表达-youtube

    culinary tradition 烹饪传统 crunchy 松脆的 boutique  精品店 migraine  偏头痛 colon 冒号 towel 毛巾 ecstatic  狂喜的 bok ...

  3. window 中安装 hadoop

    win10上部署Hadoop-2.7.3——非Cygwin.非虚拟机   开始接触Hadoop,听人说一般都是在Lunix下部署Hadoop,但是本人Lunix不是很了解,所以Google以下如何在W ...

  4. [转] Spring Boot 揭秘与实战（二） 数据存储篇 - ElasticSearch

    [From] http://www.tuicool.com/articles/JBvQrmj 本文讲解Spring Boot基础下,如何使用 ElasticSearch,实现全文搜索. 版本须知 sp ...

  5. C++中namespace的使用

    命名空间(namespace)是一种描述逻辑分组的机制,可以将按某些标准在逻辑上属于同一个任务中的所有类声明放在同一个命名空间中.标准C++库(不包括标准C库)中所包含的所有内容(包括常量.变量.结构 ...

  6. 2019.3.28 JDBC相关

    JDBC(Java Data Base Connectivity) JDBC是一组用Java编写的类和接口 使用JDBC的好处: 1.Java的开发人员完全不需要关心数据库的连接方式和实现手段 2.提 ...

  7. 如何在新导入的python项目中一次性生成依赖的第三方库

    requirements.txt用来记录项目所有的依赖包和版本号,只需要一个简单的pip命令就能完成. pip freeze >requirements.txt 然后就可以用 pip insta ...

  8. Xtts v4变化&先决条件&已知问题

    V4变化的主要有:     1.这个采购使用简化的命令.源的一个命令(--backup)和目标的一个命令(--restore). 2.此过程只需要在源和目标的$ TMPDIR(res.txt)之间复制 ...

  9. C++ 调用Python3

    作为一种胶水语言,Python 能够很容易地调用 C . C++ 等语言,也能够通过其他语言调用 Python 的模块. Python 提供了 C++ 库,使得开发者能很方便地从 C++ 程序中调用 ...

  10. python 学习笔记二_列表

    python不需要声明类型信息,因为Python的变量标识符没有类型. 在Python中创建一个列表时,解释器会在内存中创建一个类似数组的数据结构类存储数据,数据项自下而上堆放(形成一个堆栈).索引从 ...