问题：

<!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. Android Studio 常用应用

    1.在控制台的Logcat中输出测试语句 package com.example.lucky.helloworld; import android.support.v7.app.AppCompatAc ...

  2. UVA - 10635 LIS LCS转换

    白书例题,元素互不相同通过哈希转换为LIS求LCS #include<iostream> #include<algorithm> #include<cstdio> ...

  3. 隐藏入口文件的apache配置

    AllowOverride None->AllowOverride All #LoadModule rewrite_module modules/mod_rewrite.so->LoadM ...

  4. c# datagridview 相关操作。

    string[] newRow = {"long","d","b"}; Gridview.Rows.Insert(Gridview.Rows ...

  5. H5常见问题 微信踩过得坑

    微信页面内 click事件 只在a链接的时候有效,如果是div或者span之类  一定要加上样式 cursor:pointer 点击事件才生效. <div style="cursor: ...

  6. js的apply和call

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. UltraEdit 21.3 增加 mssql, json 高亮

    1.  %appdata%\IDMComp\UltraEdit 2.  将msql2k.uew,  json.uew 放到 wordfiles 目录即可 msql2k   json的uew 下载地址如 ...

  8. java.lang.IllegalArgumentException: Result Maps collection already contains value for xxx

    本人项目产生此问题的原因是: 本地备份了一份xxxmapper.xml的副本“xxxmapper - 副本.xml”,应该是系统会自动加载“mappe”目录下的所有xml文件. 参考:https:// ...

  9. SQL手工注入学习 一

    sql注入:    (基于DVWA环境的sql注入) 流程:    1.判断是否有SQL注入漏洞    2.判断操作系统.数据库和web应用的类型    3.获取数据库信息看,包括管理员信息(拖库)  ...

  10. Thinkphp基于规则的Auth权限认证类

      PS:onethink是基于该权限认证类实现,Auth类作为官方类库,在Library\Think里面. 其实Auth类也是基于角色访问控制RBAC扩展的,具体到节点的权限校验方式还是需要根据业务 ...