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>

    也能输出正确结果

     
  • 相关阅读:
    VMware Workstation 卸载时卡在“正在卸载网络驱动程序(Virtual Network Editor夯死)”
    Windows 开启 winrm
    【Git】error: RPC failed; HTTP 413 curl 22 The requested URL returned error:413 Request Entity Too Large
    tricks
    MySQL 5.7原生通用二进制格式安装包安装过程
    WebSnapshotsHelper(HTML转换为图片)
    使用两个zTree,调用一个onCheck函数,分别展开不同的节点
    修改Sql Server字段类型
    添加一条公告并标记为已读
    优化部门人员加载缓慢
  • 原文地址:https://www.cnblogs.com/LEEEEEASON/p/6991566.html
Copyright © 2011-2022 走看看