Teilen Sie ein Beispiel-Tutorial für die bidirektionale Bindung von Angular js-js-Tutorial-php.cn

Teilen Sie ein Beispiel-Tutorial für die bidirektionale Bindung von Angular js

零下一度

Freigeben： 2017-06-26 09:58:14

Original

1192 Leute haben es durchsucht

Frage:

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

Nach dem Login kopieren

Das angezeigte Ergebnis ist

Wenn ich jedoch 50 eingebe, möchte ich das Ergebnis 60 sein

Weil dies ein Zeichenfolgentyp ist und in einen numerischen Typ konvertiert werden muss

Lösung:

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

Nach dem Login kopieren

Die Anzeige ist normal, d. h. wenn {{first *1+second*1}} angezeigt wird, konvertieren Sie es

oder aktivieren Sie die Ereignisüberwachung

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

Nach dem Login kopieren

kann auch korrekte Ergebnisse ausgeben

 <br>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel-Tutorial für die bidirektionale Bindung von Angular js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!