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>

    也能输出正确结果

     
  • 相关阅读:
    JNI和NDK编程
    View的弹性滑动
    View的滑动
    《软件项目管理》课程
    《软件测试》课堂笔记05
    “MAVEN” 简单入门
    “Junit” 简单测试
    关于“百合测试”的实例
    关于“黑盒测试”的实例
    《软件测试》课堂笔记04
  • 原文地址:https://www.cnblogs.com/LEEEEEASON/p/6991566.html
Copyright © 2011-2022 走看看