ホームページ >ウェブフロントエンド >jsチュートリアル >Angular js 双方向バインディングのサンプル チュートリアルを共有する
Angular js 双方向バインディングのサンプル チュートリアルを共有する
- 零下一度オリジナル
- 2017-06-26 09:58:141198ブラウズ
問題:
<!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になるようにしたいです
これは文字列型であり、数値に変換する必要があるためですtype
解決策:
<!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>は、{{最初の*1+秒*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>
以上がAngular js 双方向バインディングのサンプル チュートリアルを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。