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>

    也能输出正确结果

     
  • 相关阅读:
    记录一下最近面试的总结
    网络模块相关面试题
    JVM 之类加载器
    一段简单的关于字符串的 Java 代码竟考察了这么多东西
    LeetCode 链表题 ( Java )
    MD5 加盐加密
    SpringMVC 学习笔记
    [redis]dict和rehash
    [redis]SDS和链表
    [go]包和工程管理
  • 原文地址:https://www.cnblogs.com/LEEEEEASON/p/6991566.html
Copyright © 2011-2022 走看看