zoukankan      html  css  js  c++  java
  • Angular js 双向绑定时字符串的转换成 数字类型的问题

    问题:

    <!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>

    也能输出正确结果

     
  • 相关阅读:
    vue中实现后台管理路由标签页
    vue实现侧边导航栏
    node学习(-)
    javascript面试题(二)
    尾递归(简要)
    javascript面试题(一)
    Windows平台基于RTMP实现一对一互动直播
    如何实现RTMP推送Android Camera2数据
    Windows平台RTMP/RTSP直播推送模块设计和使用说明
    如何设计一款跨平台低延迟的RTMP/RTSP直播播放器
  • 原文地址:https://www.cnblogs.com/LEEEEEASON/p/6991566.html
Copyright © 2011-2022 走看看