Rumah > hujung hadapan web > tutorial js > 分享Angular js 双向绑定的实例教程

分享Angular js 双向绑定的实例教程

零下一度
Lepaskan: 2017-06-26 09:58:14
asal
1230 orang telah melayarinya

问题:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js?1.1.11"></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>
Salin selepas log masuk

显示结果为

但是,我要是输入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?1.1.11"></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>
Salin selepas log masuk

显示即可正常 即是在 {{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?1.1.11"></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>
Salin selepas log masuk

也能输出正确结果

 <br>
Salin selepas log masuk

Atas ialah kandungan terperinci 分享Angular js 双向绑定的实例教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan