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>

    也能输出正确结果

     
  • 相关阅读:
    CentOS 6.3下Samba服务器的安装与配置(转)
    利用香蕉派自制电视盒子
    利用arduino制作瓦力万年历-1.0
    arduino:int & double 转string 适合12864下使用
    centos 6.X下建立arduino开发环境
    树莓派学习笔记(7):利用bypy实现树莓派NAS同步百度云
    直接插入排序
    直接选择排序
    快速排序算法
    git 分支管理 推送本地分支到远程分支等
  • 原文地址:https://www.cnblogs.com/LEEEEEASON/p/6991566.html
Copyright © 2011-2022 走看看