정렬3

• 

  [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] $http 서비스로 받아온 데이터에 필터를 적용해보자. AngularJS에서 $http 서비스를 이용하여 json 데이터를 컨트롤러에 갖고 와 필터를 적용해서 화면에 표시해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다. 컨트롤러 코드를 살펴보면 $http.get()으로 파일경로를 입력하면 파일 내용을 response에 담아 온다.JSON 파일경로나 JSON 데이터를 넘겨주는 URL을 기재하면 된다. json 데이터를 보면 date 이름으로 배열형태로 담겨져 있어서 response.data로 하였다. $http.get("./data.json").then( f.. ■ Front-End ■/AngularJs 2023. 2. 22.

• 

  [AngularJS] 표시되는 데이터를 정렬(orderBy) 해보자. AngularJS에서 orderBy 필터를 사용해서 화면에 데이터를 정렬하여 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp" 으로 정의하고 ng-controller 속성을 만들고 "myCtrl" 이라고 정의한다. 영역에서 div 태그에 정의한 "myApp" 으로 app을 생성하고 "myCtrl" 로 controller를 생성합니다. controller 내에서 $scope 에 값을 할당하면 화면요소에 바인딩되어 표시된다. angular.module('myApp', []).controller('myCtrl' , function($scope) { $scope.names.. ■ Front-End ■/AngularJs 2023. 2. 22.