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

jquery에서 get 함수에 대해 알아보겠습니다.

jquery get  함수는 jquery object와 매칭되는 DOM을 반환합니다.

- html 

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>
<hr/>
<span id="result1"></span>
<span id="result2"></span>
- javascript  
$(document).ready(function () {
  var foo = $('li').get(0);
  var bar = $('#bar').get(0);
  
  $('#result1').text(foo.nodeName);
  $('#result2').text(bar.parentElement.nodeName);
});



jquery get 함수를 이용해서 DOM을 반환하고 선택된 DOM의 nodename과 parentElement의 Nodename을 결과로 적었습니다.

jquery get 함수를 이용한다면 attribute, class등등 다양한 값을 가져올 수 있습니다.

예제보기



'jQuery' 카테고리의 다른 글

[jQuery] jquery hide() show() animate()  (0) 2016.01.28
[jQuery] jquery select value, select 값 가져오기, select 속성 값  (0) 2016.01.27
[jQuery] jquery form submit()  (0) 2015.12.17
[jQuery] jquery change change()  (0) 2015.12.16
[jQuery] jQuery each 함수, each 반복, each 루프  (0) 2015.10.29

jquery에서 form 전송에 대해 알아보겠습니다.

jquery form 전송은 간단하게 submit() 함수를 호출하여 전송이 가능합니다.

- html 

<form name="testForm" id="login">
    <input type="text" id="id"/>
    <input type="text" id="pw"/>
    <input type="submit"/>
</form>
<hr/>
<button id="btn">전송</button>

- javascript 

	
$(document).ready(function() {
    $("form").submit(function(event) {
  	var id = $('#id').val();
    var pw = $('#pw').val();
    
   	if (id != "" && pw != "") {
    	alert("id :: " + id + ", pw :: " + pw);
    }
    
    if (id == "") {
    	alert("id를 입력해주세요.");
    	event.preventDefault();
      return;
    }
    
    if (pw == "") {
    	alert("pw를 입력해주세요.");
    	event.preventDefault();
      return;
    }   
  });
  
  $('#btn').click(function () {
  	$("form").submit();
  });
});


<form></form> 내부의 type="submit" 의 input DOM을 두고 form 전송 이벤트를 구현할 수 있다.

별도의 전송 버튼을 이용하여 폼을 전송하고 싶을 때는 버튼을 만들고 $("form").submit() 을 바로 호출하면 버튼을 이용한 전송도 가능하다.


- 예제 : 이동

'jQuery' 카테고리의 다른 글

[jQuery] jquery select value, select 값 가져오기, select 속성 값  (0) 2016.01.27
[jQuery] jquery get get()  (0) 2015.12.18
[jQuery] jquery change change()  (0) 2015.12.16
[jQuery] jQuery each 함수, each 반복, each 루프  (0) 2015.10.29
[jQuery] jQuery css, jQuery 스타일 적용  (0) 2015.10.15

jquery change함수에 대해 알아보겠습니다.

jquery chage함수는 DOM의 상태 변경 등의 이벤트가 발생했을 때 사용할 수 있습니다.

- html 

<div>
  <select id="sweets">
    <option>Chocolate</option>
    <option>Candy</option>
    <option>Taffy</option>
    <option>Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>
</div>
<hr/>
<div>
  <input type="text" id="txt"/>
  <span id="result"></span>
</div>

- javascript

$(document).ready(function () {
	$('#sweets').change(function () {
  		alert($(this).val());
  });
  
  $('#txt').change(function() {
  	// validation check 
    $('#result').text($(this).val());
  });
});


첫번째는 change 함수를 이용해서 HTML의 select 변경이 일어났을 때 선택된 이름을 알림창으로 나타냅니다.

두번째는 change 함수를 이용해서 HTML input 값을 다 입력하고 input의 focus가 사라졌을 때 

span에 input에 입력된 값을 표시합니다.

input에 적용된 change 함수의 경우에는 텍스트가 입력될 때 마다 적용되는게 아니라

focus가 사라졌을 때 적용된다는 점을 주의해주시기 바랍니다.


예제보기



'jQuery' 카테고리의 다른 글

[jQuery] jquery get get()  (0) 2015.12.18
[jQuery] jquery form submit()  (0) 2015.12.17
[jQuery] jQuery each 함수, each 반복, each 루프  (0) 2015.10.29
[jQuery] jQuery css, jQuery 스타일 적용  (0) 2015.10.15
jQuery] val(), text() 값 셋팅, 값 가져오기 setValue, setText  (0) 2015.10.11

스마트폰 등 디지털 기기의 화면에서 나오는 청생광(Bluelight)이 시각 세포를 손상할 가능성이 크다는 연구결과가 나왔다고 합니다.


스마트폰 국내 이용자가 2000만명을 넘어서는 등 디지털기기의 급속한 확산이 사람들의 눈의 피로와 시력저하의 주범입니다.

저도 이런 뉴스를 예전에 접하고 청광렌즈를 사용하고 있는데 스마트폰이나 직장에서 모니터를 보는 시간이 많은 분들은 청광렌즈 사용을 생각해보셔야 할꺼 같습니다.





'일상, 생활' 카테고리의 다른 글

키보드 청소 방법  (0) 2020.04.17

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

+ Recent posts

티스토리툴바