「AngularJS」ng-bindディレクティブで評価する式を指定する

2021年9月16日

書式
<要素 ng-bind="{式}">
ngBind属性は、Angularに指定したHTML要素のテキスト内容を与えた式の値に置換するように指示し、式の値が変更された際にテキスト内容を更新します。

使用例

<!DOCTYPE html>

<html>

<body>

</div>

//moduleの宣言

var app = angular.module('myApp', []);

//controllerの設定　データモデルの使用

app.controller('cftCtrl', function($scope) {

$scope.username = "User007";

$scope.addr = "TestAddr 12345";

});

</script>

<p>ng-bindディレクティブを使用して、要素のinnerHTMLをデータモデルのプロパティにバインドします。</p>

</body>

</html>

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="cftCtrl"> <p ng-bind="username"></p> <p ng-bind="addr"></p> </div> <script> //moduleの宣言 var app = angular.module('myApp', []); //controllerの設定　データモデルの使用 app.controller('cftCtrl', function($scope) { $scope.username = "User007"; $scope.addr = "TestAddr 12345"; }); </script> <p>ng-bindディレクティブを使用して、要素のinnerHTMLをデータモデルのプロパティにバインドします。</p> </body> </html>

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="cftCtrl">
    <p ng-bind="username"></p>
    <p ng-bind="addr"></p>
</div>

<script>
//moduleの宣言
var app = angular.module('myApp', []);
//controllerの設定　データモデルの使用
app.controller('cftCtrl', function($scope) {
    $scope.username = "User007";
    $scope.addr = "TestAddr 12345";    
});
</script>

<p>ng-bindディレクティブを使用して、要素のinnerHTMLをデータモデルのプロパティにバインドします。</p>

</body>
</html>

AngularJS

Posted by arkgame

関連投稿: