问题：

<!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. RNA-seq分析htseq-count的使用

    HTSeq作为一款可以处理高通量数据的python包,由Simon Anders, Paul Theodor Pyl, Wolfgang Huber等人携手推出HTSeq — A Python fra ...

  2. Linux 安装 Djiango

    yum 安装方法 以下安装位于 Centos Linux 环境下安装,如果是你的 Linux 系统是 ubuntu 请使用 apt-get 命令. 默认情况下 Linux 环境已经支持了Python. ...

  3. Unix或Linux中&、jobs、fg、bg等命令的使用方法

    [From] http://blog.sina.com.cn/nenutechnology fg.bg.jobs.&.ctrl + z都是跟系统任务有关的,虽然现在基本上不怎么需要用到这些命令 ...

  4. Mac上Node环境配置

    公司配备Mac笔记本,以前没用过mac开发项目,一开始依然是从node官网下载安装包,后来领导说最好是用brew安装软件,这样比较方便,安装和卸载,只要在命令行输入相应的 install 和 unin ...

  5. python3.6从含有html代码的json的中取出某个值

    python3.6从含有html代码的json的中取出某个值 之前在做接口测试的时候,网站的后端是用java写的,然后接口的response返回的都是json格式,json很简单,就是字典,类似这样子 ...

  6. [V1-Team] WEDO创意论坛功能规格说明书

    项目功能规格说明书 版本说明 版本 内容 时间 V1.0 描述总体目标,用户使用场景,界面原型.功能设计及验收 2019.3.28 附Github仓库:WEDO 正文 1.目标 规范指导整个项目设计与 ...

  7. http和web缓存

    1.http的缓存类型   缓 存对于一个网站来说非常重要,可以提高网站性能,减少冗余的数据传输,增加服务器负担,web存储则给浏览器提供了更加强大的保存文件的接口.关于web下的http缓存类型比较 ...

  8. 一些Andoid studio常用的快捷键

    常用快捷键    Android Studio是基于IntelliJ IDEA的,我们都知道,IDEA是一个很方便很好用的IDE,其中有许多快捷键,但是太多快捷键我们也记不住. 其实,我们可以记住几个 ...

  9. JetBrains PyCharm（Community版本）的下载、安装和初步使用

    不多说,直接上干货! 首先谈及这款软件,博主我用的理由:搞机器学习和深度学习! 想学习Python的同学们,在这里隆重介绍一款 Python 的开发工具 pyCharm IDE.这是我最喜欢的 Pyt ...

  10. BSON入门

    1.概念BSON(Binary Serialized Document Format)是一种类json的一种二进制形式的存储格式,简称Binary JSON,它和JSON一样,支持内嵌的文档对象和数组 ...