Angularjs 雙向綁定時字符串的轉(zhuǎn)換成數(shù)字類型的問題

2019-11-19 16:21:23

字體：大中小

供稿：網(wǎng)友

問題：

<!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">結(jié)果為 <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>

顯示結(jié)果為

但是，我要是輸入50，想要結(jié)果為60

因為這個是字符串類型需要轉(zhuǎn)換成數(shù)字類型

解決方法：

<!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">結(jié)果為 <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}}顯示的時候，轉(zhuǎn)換了一下

或者，啟用事件監(jiān)聽

<!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">結(jié)果為 <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>