Angularjs의 ng-style, ngStyle, angurlajs css 적용에 대해서 알아보겠습니다.


ng-style, ngStyle를 이용하여 angularjs에서 css를 적용할 수 있습니다.


- html 

<div ng-app="app" ng-controller="controller">
   <div>
     <span ng-style="Style">text color</span>
    <button ng-click="setColorRed()">color Red</button>
   </div> 
   <div>
     <span ng-style="background">text color</span>
     <button ng-click="setBackgroundRed()">background Red</button>
   </div>
</div>
- javascript
var app = angular.module("app", []);
  app.controller("controller", function ($scope) {

    $scope.setColorRed = function () {
      $scope.Style = {
        'color' : 'red'
      };
    }
    
    $scope.setBackgroundRed = function () {
      $scope.background = {
        'background-color' : 'red'
      };
    }
});

ng-style에 Style과 background 객체를 바인딩하여 버튼 클릭이 됐을 때 style을 적용합니다.


기존 css와 다른점은 ng-style로 css를 적용할 때 JSON 형태로 {"속성":"값"} 적용한다는 점 유의해 주시기 바랍니다.




예제보기


저작자표시 (새창열림)

'AngularJS' 카테고리의 다른 글

[Angularjs] angularjs click ngclick 버튼 클릭  (0) 2015.12.23
[Angularjs] filter, $filter, 필터링, 재정렬  (0) 2015.12.22
[Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문  (0) 2015.12.15
[Angularjs] angularjs controller 컨트롤러  (0) 2015.12.14
[Angularjs] angularjs $scope 스코프  (0) 2015.12.14

Angularjs의 click, ngclick에 대해서 알아보겠습니다.

click은 버튼 클릭 이벤트입니다.  

ng-click과 dbl-click을 사용해보겠습니다.


- html 

<body ng-app="myApp">
   <div ng-controller="ctrl1">
    <button ng-click="click1()">버튼 클릭</button>
    <hr/>
    <button ng-click="able && click2()">버튼 클릭이 안돼요</button>
    <hr/>
    <button ng-dblclick="click3()">더블 클릭</button>
  </div>
</body>

- javascript

var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {

  $scope.able = false;
  
  $scope.click1 = function() {
  	alert("버튼 클릭");
  }
  $scope.click2 = function() {
  	alert("버튼 클릭");
  }
  $scope.click3 = function() {
  	alert("더블 클릭");
  }
});


간단하게 버튼 클릭을 구현할 수 있습니다.

두번째 예제 같은 경우에는 false 값을 ng-click 안에 넣어줘서 클릭이 안되게 막을 수 있습니다.

ng-dblclick은 더블 클릭 이벤트로 더블 클릭으로 작동하게 됩니다.


예제 : 이동

'AngularJS' 카테고리의 다른 글

[Angularjs] Angularjs ng-style, ngStyle, angurlajs css 적용  (0) 2016.01.19
[Angularjs] filter, $filter, 필터링, 재정렬  (0) 2015.12.22
[Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문  (0) 2015.12.15
[Angularjs] angularjs controller 컨트롤러  (0) 2015.12.14
[Angularjs] angularjs $scope 스코프  (0) 2015.12.14

Angularjs의 filter에 대해서 알아보겠습니다.

filter는  필터링 후에 재정렬을 시켜주는 기능을 한다고 생각하시면 될거 같습니다.

예제로 간단하게 filter를 사용해보겠습니다.

- html 

<body ng-app="myApp">
  <div ng-controller="ctrl1">
    <label>Search: <input ng-model="searchText"></label>
    <div ng-repeat="friend in friends | filter:searchText">
      <span> {{ friend.name }} </span>
      <span> {{ friend.age }} </span>
      <span> {{ friend.gender }} </span>
    </div>
    <hr/>
    <div ng-repeat="friend in friends | orderBy:'age'">
      <span> {{ friend.name }} </span>
      <span> {{ friend.age }} </span>
      <span> {{ friend.gender }} </span>
    </div>
  </div>
</body>
- javascript
var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {
  $scope.friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
	];
});

이름과 나이 성별로 구성된 JSON배열을 선언하고

ng-repeat에 | (파이프 기호)를 추가하여 filter 조건을 추가하였습니다.

| filter:searchText 는 input 에 선언된 ng-model=“searchText” 값에 따라 

배열이 재정렬됩니다.

아래는 filter 모듈안에 있는 orderby를 이용하여 나이순으로 정렬하는 예입니다.



예제보기


'AngularJS' 카테고리의 다른 글

[Angularjs] Angularjs ng-style, ngStyle, angurlajs css 적용  (0) 2016.01.19
[Angularjs] angularjs click ngclick 버튼 클릭  (0) 2015.12.23
[Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문  (0) 2015.12.15
[Angularjs] angularjs controller 컨트롤러  (0) 2015.12.14
[Angularjs] angularjs $scope 스코프  (0) 2015.12.14

Angularjs의 ngrepeat에 대해서 알아보겠습니다.

ngrepeat는 쉽게 얘기하면 배열을 처리해주는 기능을 한다고 생각하시면 될거 같습니다.

예제로 간단하게 ngrepeat를 사용해보겠습니다.

- html 

<body ng-app="myApp">
  <div ng-controller="ctrl1">
    <div ng-repeat="friend in friends">
      <span> {{ friend.name }} </span>
      <span> {{ friend.age }} </span>
      <span> {{ friend.gender }} </span>
    </div>
  </div>
</body>

- javascript

var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {
  $scope.friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
	];
});


controller안에 friends라는 JSON 배열을 만들었습니다.

html에서는 ng-repeat를 이용하여 "friend in friends" 배열 을 돌면서
JSON 배열의 수 만큼 반복하여 html을 작성해주는 예제입니다.

angularjs 가장 장점 중 하나로 소스 코드 작성시 소스가 굉장히 간결해집니다.



예제 : 이동

다음에는 filter를 이용하여 필터링 하는 부분을 알아보겠습니다.


'AngularJS' 카테고리의 다른 글

[Angularjs] angularjs click ngclick 버튼 클릭  (0) 2015.12.23
[Angularjs] filter, $filter, 필터링, 재정렬  (0) 2015.12.22
[Angularjs] angularjs controller 컨트롤러  (0) 2015.12.14
[Angularjs] angularjs $scope 스코프  (0) 2015.12.14
[Angularjs] angularjs 시작하기, 기초, 샘플  (0) 2015.12.10

Angularjs의 controller에 대해서 알아보겠습니다.

controller는 $scope를 이용해서 controller <-> view 양방향 바인딩이 가능하게 해주는 역할을 합니다.

예제로 간단하게 controller를 사용해보겠습니다.

- html 

<body ng-app="myApp">

  <div ng-controller="ctrl1">
    <input ng-model="txt">
    <span>{{txt}}</span>
    
    <button ng-click="click()">버튼 클릭</button>
  </div>
  <hr/>
  <div ng-controller="ctrl2">
    <input ng-model="txt">
    <span>{{txt}}</span>
    
    <button ng-click="click()">버튼 클릭</button>
  </div>
</body>

- javascript

var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {
  $scope.txt = "테스트입니다";
  
  $scope.click = function() {
  	alert("버튼 클릭");
  }
});

app.controller('ctrl2', function($scope) {
  $scope.txt = "ctrl2 컨트롤러입니다.";
  
  $scope.click = function() {
  	alert("ctrl2 컨트롤러입니다.");
  }
});


예제에서는 두 개의 컨트롤러를 만들었습니다. 

나중에 angularjs를 이용한 프로젝트를 진행하시다면 화면별로 controller를 분리하여 작성하시면 편하게 사용하실 수 있을꺼 같습니다.



예제 : 이동


간단하게 컨트롤러를 사용하는 방법에 대해 알아보았습니다.



'AngularJS' 카테고리의 다른 글

[Angularjs] angularjs click ngclick 버튼 클릭  (0) 2015.12.23
[Angularjs] filter, $filter, 필터링, 재정렬  (0) 2015.12.22
[Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문  (0) 2015.12.15
[Angularjs] angularjs $scope 스코프  (0) 2015.12.14
[Angularjs] angularjs 시작하기, 기초, 샘플  (0) 2015.12.10

Angularjs 의 $scope에 대해서 알아보겠습니다.

$scope는 어플리케이션 모델을 나타내는 객체이고 $scope를 이용하여 변수 및 이벤트를 정의할 수 있습니다.

예제로 간단하게 $scope를 사용해보겠습니다.

- html 

<body ng-app="myApp">
  <div ng-controller="ctrl1">
    <input ng-model="txt">
    <span>{{txt}}</span>
    
    <button ng-click="click()">버튼 클릭</button>
  </div>
</body>

ng-click이라는 함수를 클릭 이벤트를 정의하는 angularjs 규칙입니다. 

다음에 ng-click에 대해서 자세하게 다루겠습니다.

ng-click을 이용하여 클릭 이벤트를 정의하고 $scope에서 이벤트를 구현합니다.


- javascript 


var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {
  $scope.txt = "테스트입니다";
  
  $scope.click = function() {
  	alert("버튼 클릭");
  }
});

$scope.txt = “테스트입니다”; // 초기 값을 지정할 수 있습니다.

$scope.click = function() {}; // 함수를 정의하여 이벤트를 만들수 있습니다.



예제 : 이동



'AngularJS' 카테고리의 다른 글

[Angularjs] angularjs click ngclick 버튼 클릭  (0) 2015.12.23
[Angularjs] filter, $filter, 필터링, 재정렬  (0) 2015.12.22
[Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문  (0) 2015.12.15
[Angularjs] angularjs controller 컨트롤러  (0) 2015.12.14
[Angularjs] angularjs 시작하기, 기초, 샘플  (0) 2015.12.10
Angularjs를 시작하면 제일 많이나오는 샘플입니다.

Angularjs 양방향 데이터 바인딩이 되기 때문에 별도의 javascript코딩없이 적용되는 모습을 볼 수가 있습니다.

  
<div ng-app>
<input ng-model="txt">
<span>{{txt}}</span>
</div>
<div>
<input ng-model="txt">
<span>{{txt}}</span>
</div>


ng-app는 angularjs 라이브러리를 적용하겠다고 선언하는 부분입니다.


저는 <div ng-app> </div> div안에 선언해 놓았기 때문에 <div> 안에서만 angularjs 라이브러리가 적용이 됩니다.

아래는 ng-app이 선언이 안되었기 때문에 에러가 나는 걸 확인할 수 있습니다.


샘플을 통해서 확인하시면 더욱 이해가 빠르게 될꺼 같습니다.


예제 : 이동


'AngularJS' 카테고리의 다른 글

[Angularjs] angularjs click ngclick 버튼 클릭  (0) 2015.12.23
[Angularjs] filter, $filter, 필터링, 재정렬  (0) 2015.12.22
[Angularjs] repeat, ngrepeat, 배열, 배열 처리, 반복, 반복문  (0) 2015.12.15
[Angularjs] angularjs controller 컨트롤러  (0) 2015.12.14
[Angularjs] angularjs $scope 스코프  (0) 2015.12.14

+ Recent posts

티스토리툴바