angular.js 기초 - 2

3. 응용

 

 

<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">

 

-> 이렇게 style에도 쓸 수 있음

 

 

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

-> 계산도 가능, 결과 : 5

 

 

 

 

4. Angular JS object - 객체 형태

 

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> 

<p>The name is <span ng-bind="person.lastName"></span></p>

<p>The name is {{ person.lastName }}</p>

-> 객체형태로 저장한 후, person.lastName으로 보여줌

 

 

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

app.controller('control',['$scope',function($scope){

     $scope.obj = {}; //-> 객체 선언

     $scope.click = function(){

          $scope.obj.id = document.getElementById('m_id').value;

          $scope.obj.password = document.getElementById('m_pwd').value;

          console.log($scope.obj);

     };

}]);

 

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

<p>The third result is {{ points[2] }}</p> -> 결과 : 19

-> 배열도 가능

 

 

 

5. directive 사용

 

<div ng-app="myApp" w3-test-directive></div>



<script> 

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


app.directive("w3TestDirective", function() {

    return {

        template : "I was made in a directive constructor!"

    };

});

</script>

-> w3-test-directive 라는 이름으로 지침?(directive)를 세워 리턴한 템플릿을 보여줌

 

결과 : I was made in a directive constructor!