cari

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

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

零下一度
零下一度asal
2017-06-26 09:58:141159semak imbas

问题：

<!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>

显示结果为

但是，我要是输入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>

显示即可正常 即是在 {{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>

也能输出正确结果

 <br>

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

Kenyataan：
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
Artikel sebelumnya：Angular js过滤器的详细介绍Artikel seterusnya：Angular js ng-bind 和ng-module的区别

Artikel berkaitan

Lihat lagi