반응형 전체 글149 [AngularJS] 폼 입력항목 AngularJS의 유효성검사 AngularJS에서 angular.copy() 함수를 사용하여 폼의 reset 기능을 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. form 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성에는 "myCtrl"이라고 정의한다. form 태그에 novalidate 속성을 정의하면 브라우저의 유효성 검사를 하지 않는다. 폼 입력항목에 required 속성을 정의한다. "name" 입력항목에 유효성검사 오류시 표시되는 문구다. $dirty 는 폼에서 사용자가 값을 수정한 적이 있는지를 확인한다. $invalid 는 폼에서 입력항목의 값에 오류가 있는지를 확인한다. 참고로 $valid는 항목의 값.. ■ Front-End ■/AngularJs 2023. 2. 22. [AngularJS] 폼에서 angular.copy() 함수를 사용하여 reset 기능구현 AngularJS에서 angular.copy() 함수를 사용하여 폼의 reset 기능을 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다. 컨트롤러에 다음과 같이 resetUser를 정의해 두고 reset() 함수를 만든다. reset() 함수에서는 angular.copy() 함수를 사용하여 resetUser를 currUser에 복사한다. AngularJS 가 처음 시작할 때 $scope.reset(); 로 한번 호출되어 currUser에는 resetUser가 복사되어 있다. app.controlle.. ■ Front-End ■/AngularJs 2023. 2. 22. [AngularJS] ng-show, ng-hide 속성으로 화면요소를 보이기/감추기 AngularJS에서 ng-show, ng-hide 속성을 사용하여 화면요소를 동적으로 보이고 감추는 예제를 구현한다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp"으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다. lastName은 ng-show 속성을 만들었고 firstName은 ng-hide 속성을 만들었다. ng-show 속성은 true일 때 보이고 false 일 때 안 보인다. ng-hide 속성은 true일때 감추고 false 일 때 표시된다. 컨트롤러에 다음과 같이 isShow, isHide 값을 정의했다. $scope..isShow = fals.. ■ Front-End ■/AngularJs 2023. 2. 22. [AngularJS] ng-disabled 속성으로 버튼을 활성화/비활성화 AngularJS에서 ng-disabled 속성을 사용하여서 동적으로 버튼의 활성화 상태를 변경한다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "" 으로 정의하고 ng-init 속성에 값을 "mySwitch=true" 로 정의한다. 버튼1은 활성화 상태로 표시되고 버튼2는 비활성화 상태로 표시되는 일반적인 버튼이다. 버튼1 버튼2 버튼3은 ng-diabled 속성을 만들고 값을 "mySwich"로 정의하였다. ng-init에 "mySwitch=true" 로 초기설정이 되어있어 처음에 표시될 때는 버튼3은 비활성화 상태로 표시된다. 버튼3 체크박스항목에 ng-model 속성을 만들고 "mySwitch".. ■ 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] $http 서비스를 이용하여 json을 갖고와 표시해보자. 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").success( function(re.. ■ 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. [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. [AngularJS] ng-controller에서 $scope 를 사용해보자. AngularJS에서 ng-controller를 생성하고 $scope를 사용하여 화면에 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-app 속성을 만들고 "myApp" 으로 정의하고 ng-controller 속성을 만들고 "myCtrl"이라고 정의한다. 영역에서 div 태그에 정의한 "myApp" 으로 app을 생성하고 "myCtrl"로 controller를 생성한다. 그리고 나면 controller 내에서 $scope 에 값을 할당하면 화면 요소에 바로 바인딩되어 표시된다. 참고로 $scope는 정의된 controller 내에서 화면 요소와 연계된 유효한 저장공간으로 생각할 수 있다. var .. ■ Front-End ■/AngularJs 2023. 2. 22. [AngularJS] ng-repeat로 반복해서 표시해 보자. #2 지난번에는 초기값으로 선언된 단순 배열을 반복해서 표시했다. 2023.02.22 - [■ Front-End ■/AngularJs] - [AngularJS] ng-repeat로 반복해서 표시해 보자. #1 [AngularJS] ng-repeat로 반복해서 표시해 보자. #1 AngularJS로 미리 선언된 초기값을 ng-repeat 속성으로 반복해서 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-init 속성을 agapeuni.tistory.com 이번에는 좀 더 복잡한 형태의 값을 표시하는 예제를 구현해 본다. div 태그에 ng-init 속성을 만들고 값을 미리 정의한다. names라는 이.. ■ Front-End ■/AngularJs 2023. 2. 22. [AngularJS] ng-repeat로 반복해서 표시해 보자. #1 AngularJS로 미리 선언된 초기값을 ng-repeat 속성으로 반복해서 표시하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. div 태그에 ng-init 속성을 만들고 값을 미리 정의한다. ng-init에 정의한 books를 반복해서 표시하려면 태그에 ng-repeat 속성을 사용한다. 반복할 대상을 in으로 선언하고 그것을 표시하고자 하는 곳에 Angular 템플릿으로 정의한다. {{ book }} {{ book }} 예제코드 Book List: {{ book }} {{ book }} ng-init으로 정의한 목록이 아래의 화면과 같이 자동으로 반복하여 표시된다. ■ Front-End ■/AngularJs 2023. 2. 22. [AngularJS] 앱(ng-app)과 컨트롤러(ng-controller) 생성 AngularJS를 사용하여 앱(ng-app)과 컨트롤러(ng-controller) 생성하는 예제를 구현해 본다. AngularJS를 사용하기 위해서 아래와 같이 angularJS CDN을 script 태그에 추가한다. 다음과 같이 "myApp" 이름으로 앵귤러앱(모듈)을 만든다. var app = angular.module('myApp', []); 생성한 "myApp" 앱에 "myCtrl" 이름으로 컨트롤러를 만든다. 이름은 div 태그에 ng-controller 속성에 정의한 값을 사용한다. $scope에 "id", "pwd", "name"의 속성의 이름으로 값을 할당하였다. 그리고 clear() 함수와 mean() 함수도 만들어 두었다. clear() 함수는 id, pwd 값을 공백으로 할당하고 .. ■ Front-End ■/AngularJs 2023. 2. 22. 이전 1 ··· 7 8 9 10 11 12 13 다음 728x90