반응형
SMALL
Step03_class 만들어
bootstrap css와 js 파일들가져와서 옮겨놔
ng-class 라는 것이 있어
true 면 addclass, false 면 removeclass 가 되는 것임
지금은 true 니까 btn-primary 가 들어 간 것임
false 로 바꿔주면
primary 가 안들어 간 것을 확인 가능
이걸
isChecked로 바꿔 준다면??
checkbox 를 클릭함에 따라서 변경되게 할수 있음
특정 시점에서 addclass, removeclass 바꿔 줄수 있는 것임
Angular 에서 특정 클래스 조종을 하려면 ng-class 를 사용하는 것 !
Step03_class2 만들어
모듈 설정을 해주고
테이블에 컨트롤러 작성을 해줘
ajax 라고 받아온 데이터라고 가정한 것을 테이블에 출력하는 것이 가능해짐
이렇게 코딩을 해주면 ( {{tmp.addr}} 해주나 ng-bind="tmp.addr" 해주나 같은 의미임 )
이렇게 테이블이 나오는 것을 확인 가능하다.
테이블에 배경색을 지정할 수도 있음.
전체가 primary 색으로 출력이 됐어
그런데 홀수행, 짝수행 구분해서 색을 다르게 지정할수도 있다.
문자열로 전달을 해야 하니까 싱글포테이션으로 감싸야 하고
짝수행은 odd, 홀수행은 even
으로 출력가능 한 것을 확인 할수 있음.
Step03_class
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Step03_class.html</title> <link rel="stylesheet" href="css/bootstrap.css" /> <script src="js/angular.min.js"></script> </head> <body ng-app> <div class="container"> <input type="checkbox" ng-model="isChecked"/> <button class="btn" ng-class="{'btn-primary':isChecked}">버튼</button> </div> </body> </html> | cs |
Step03_class2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Step03_class2.html</title> <link rel="stylesheet" href="css/bootstrap.css" /> <script src="js/angular.min.js"></script> <script> var myApp=angular.module("myApp",[]); myApp.controller("Ctrl1",["$scope",function($scope){ //ajax 로 받아온 데이터라고 가정 var data=[]; data.push({num:1,name:"김구라",addr:"노량진"}); data.push({num:2,name:"해골",addr:"행신동"}); data.push({num:3,name:"원숭이",addr:"상도동"}); data.push({num:4,name:"주뎅이",addr:"봉천동"}); $scope.friends=data; }]); </script> </head> <body> <div class="container"> <table class="table table-borderd" ng-controller="Ctrl1"> <thead> <tr> <th>번호</th> <th>이름</th> <th>주소</th> </tr> </thead> <tbody> <tr ng-repeat="tmp in friends" ng-class-even="'bg-success'" ng-class-odd="'bg-warning'"> <td>{{tmp.num}}</td> <td>{{tmp.name}}</td> <td ng-bind="tmp.addr"></td> </tr> </tbody> </table> </div> </body> </html> | cs |
반응형
'FrameWork > AngularJS' 카테고리의 다른 글
| AngularJS from validation (0) | 2017.08.28 |
|---|---|
| Step04_showHide (0) | 2017.08.25 |
| Step02_controller2 (0) | 2017.08.25 |
| Step02_controller (0) | 2017.08.25 |
| Step01_click (0) | 2017.08.25 |
