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

2021年9月16日

書式
<要素 ng-bind="{式}">
ngBind属性は、Angularに指定した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