AngularJS Input Controls - Data-Binding



입력 컨트롤은 HTML 입력 요소입니다.

1.input elements

2.select elements

3.button elements

4.textarea elements





Data-Binding

입력 컨트롤은 ng-model지시문 을 사용하여 데이터 바인딩을 제공합니다 .



<input type="text" ng-model="firstname">



응용 프로그램에 이제 명명 된 속성이 firstname있습니다.



이 ng-model지시문은 입력 컨트롤러를 나머지 응용 프로그램에 바인딩합니다.



이 속성 firstname은 컨트롤러에서 참조 할 수 있습니다.



예

<script>

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

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

$scope.firstname = "John";

});

</script>



<!DOCTYPE html>

<html lang="en">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>



<div ng-app="myApp" ng-controller="formCtrl">

<form>

First Name: <input type="text" ng-model="firstname">

</form>

</div>



<script>

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

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

$scope.firstname = "John";

});

</script>



</body>

</html>





또한 응용 프로그램의 다른 곳에서도 참조 할 수 있습니다.



예

<form>

First Name: <input type="text" ng-model="firstname">

</form>



<h1>You entered: {{firstname}}</h1>



<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>



<div ng-app="">

<form>

First Name: <input type="text" ng-model="firstname">

</form>

<h1>You entered: {{firstname}}</h1>

</div>



<p>Change the name inside the input field, and you will see the name in the header changes accordingly.</p>



</body>

</html>