AngularJS와 바인딩 데이터는 모델과 뷰 사이의 동기화입니다.
데이터 모델
애플리케이션은 일반적으로 데이터 모델을 AngularJS와. 데이터 모델은 애플리케이션을위한 이용 가능한 데이터의 집합이다.
예
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
HTML보기
AngularJS와 응용 프로그램이 표시되는 HTML 컨테이너는, 뷰라고합니다.
뷰는 모델에 대한 액세스를 가지며, 뷰 모델 데이터를 표시하는 방법은 여러 가지가있다.
당신은 사용할 수 있습니다 ng-bind 지정된 모델 속성에 요소의 innerHTML을 바인딩 지시를 :
또한 이중 중괄호를 사용할 수 있습니다 {{ }} {{ }} {{ }} 모델의 내용을 표시합니다 :
아니면 사용할 수 있습니다 ng-model HTML에 지시어는보기로 모델을 결합하는 것.
ng-model 지침
사용 ng-model HTML 컨트롤의 뷰 모델에서 데이터를 결합하는 지시문을 (입력 선택, 텍스트 영역)
ng-model 지시어는 모델과 뷰 사이의 바인딩 두 방법을 제공합니다.
바인딩 양방향
AngularJS와 바인딩 데이터는 모델과 뷰 사이의 동기화입니다.
모델이 변화 데이터, 뷰는 변경을 반영 할 때, 상기보기 변화 데이터 모델은 또한 업데이트 될 때. 이 모델과 뷰가 항상 업데이트되어 있는지 확인하게되는 즉시 자동으로 발생합니다.
예
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
</script>
»그것을 자신을 시도 AngularJS와 컨트롤러
AngularJS와의 응용 프로그램은 컨트롤러에 의해 제어된다. 의 컨트롤러에 대해 알아 AngularJS와 컨트롤러 장.
때문에 모델 뷰 즉시 동기화의 컨트롤러는 뷰에서 완전히 분리 될 수 있으며, 단순히 모델 데이터에 집중한다. AngularJS와의 데이터 바인딩 덕분에, 뷰 컨트롤러에 변경 사항을 반영합니다.
예
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>
»그것을 자신을 시도