问题：

<!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. 1001 害死人不偿命的(3n+1)猜想 （15 分)

    #include <iostream> using namespace std; int main(){ ; cin >> n; ){ != ) n = ( * n + ) / ...

  2. codeforces833B The Bakery

    题面传送门 题目大意:将一个长度为n的序列分为k段,使得总价值最大,一段区间的价值表示为区间内不同数字的个数 思路: 显然的dp. 先想到一个朴素的状态转移方程 $dp[i][k]=max(dp[j] ...

  3. 原生js操作类名

  4. 安卓app上传到应用宝、360手机助手、小米应用商店、百度手机助手/安卓市场/91助手

    1.小米应用商店 小米开放平台网站:https://account.xiaomi.com 注册帐号教程地址:http://dev.xiaomi.com/doc/?p=90 应用提交流程:http:// ...

  5. Python Flask框架之页面跳转

    IDE用的PyCharm(还是vs强大啊). 项目结构: 2:页面: <!doctype html> <html lang="zh"> <head&g ...

  6. mysql 数据库导入数据报错MySQL server has gone away解决办法

    mysql 数据库导入数据报错MySQL server has gone away解决办法: 进入数据库执行以下命令即可: set global wait_timeout = 2880000; set ...

  7. TT 安装 之 AIX

    # mkgroup -'A' id='1000' adms='root' tt -- 创建用户 # mkuser id='1000' pgrp='tt' groups='tt' adms='root' ...

  8. Nginx下载安装

    系统环境:win7 nginx:1.11.4 1.下载Nginx 下载地址:http://nginx.org/en/download.html 2.将压缩包解压到相应位置 3.启动nginx服务,ng ...

  9. ArrayList集合长度的问题

    // 每次集合中实际包含的元素个数(count)超过了可包含元素的个数capcity  //的时候集合就会向内存中申请多开启一倍的空间,来保证集合长度够用 static void Main(strin ...

  10. PLC通信网络

    PLC通信网络的分层 PLC通信网络大致可分为3层,管理层,单元层以及现场执行(AS-I)层.如下图所示. 在PLC通信网络的三层架构中,管理层,通信方式包括MPI,工业以太网(Profinet)以及 ...