Angularjs 双向绑定时字符串的转换成数字类型的问题
- 作者: 亖呉?盀
- 来源: 51数据库
- 2021-08-23
问题:
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="http://www.51sjk.com/Upload/Articles/1/0/287/287963_20210712003557645.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://www.51sjk.com/Upload/Articles/1/0/287/287963_20210712003557645.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://www.51sjk.com/Upload/Articles/1/0/287/287963_20210712003557645.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 双向绑定时字符串的转换成数字类型的问题,希望对大家有所帮助
推荐阅读
热点文章
Angular中响应式表单的三种更新值方法详析
7
Angularjs实现下拉框联动的示例代码
7
详解AngularJS跨页面传值(ui-router)
2
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
3
angular2路由切换改变页面title的示例代码
4
Angular2 组件间通过@Input @Output通讯示例
5
Angularjs中ng-repeat的简单实例
3
AngularJS 中ui-view传参的实例详解
4
浅谈Angular路由守卫
4
详解基于Angular4+ server render(服务端渲染)开发教程
4