필터2

• 

  [AngularJS] 헤더를 클릭하여 테이블에 출력한 데이터를 정렬 AngularJS에서 JSON 형식의 데이터를 테이블에 표시한 뒤 헤더를 클릭하여 데이터를 정렬하는 예제다. 먼저 books이라는 데이터를 선언하고 orderByMe() 함수를 정의하는데 파라미터를 입력받아 myOrderBy에 저장합니다. angular.module('myApp', []).controller('myCtrl', function($scope) { $scope.books = [ { ... (아래의 코드를 참조) ... } ]; $scope.orderByMe = function(x) { $scope.myOrderBy = x; } }); ng-repeat를 사용하여 JSON 형식의 데이터를 반복하여 출력한다. 여기서 orderBy:myOrderBy라고 필터를 적용하였는데 ng-click으로 선언한.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 출력된 목록에 필터(Filter)를 적용해보자. AngularJS에서 표시되는 값에 Filter를 적용해서 소문자로 대문자로 표시하고 검색어로 필터하여 표시해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp" 으로 정의하고 ng-controller 속성을 만들고 "myCtrl" 이라고 정의한다. ng-repeat 속성으로 값을 표시할때 search로 필터를 적용하고 orderBy 필터에 "name" 필드로 정렬을 하였다. 표시되는 항목의 name속성은 소문자로 desc 속성은 대문자로 적용하였다. {{ (x.name | lowercase) + ', ' + (x.desc | uppercase) }} 예제의 전체코드이다. Filter : .. ■ Front-End ■/AngularJs 2023. 2. 22.