-
[AngularJS] 14. Bootstrap- Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:24AngularJS and Twitter BootstrapBootstrap은 유명한 스타일 시트입니다.1. BootstrapAngularJS 어플리케이션에 Bootstrap을 포함하기 위해서, <head> 요소에 아래 라인을 추가해 줍니다:12
cs 2. HTML Code12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182<!DOCTYPE html><html ng-app=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body ng-controller="userController"><div class="container"><h3>Users</h3><table class="table table-striped"><thead><tr><th>Edit</th><th>First Name</th><th>Last Name</th></tr></thead><tbody><tr ng-repeat="user in users"><td><button class="btn" ng-click="editUser(user.id)"><span class="glyphicon glyphicon-pencil"></span> Edit</button></td><td>{{ user.fName }}</td><td>{{ user.lName }}</td></tr></tbody></table><hr><button class="btn btn-success" ng-click="editUser('new')"><span class="glyphicon glyphicon-user"></span> Create New User</button><hr><h3 ng-show="edit">Create New User:</h3><h3 ng-hide="edit">Edit User:</h3><form class="form-horizontal"><div class="form-group"><label class="col-sm-2 control-label">First Name:</label><div class="col-sm-10"><input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name"></div></div><div class="form-group"><label class="col-sm-2 control-label">Last Name:</label><div class="col-sm-10"><input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name"></div></div><div class="form-group"><label class="col-sm-2 control-label">Password:</label><div class="col-sm-10"><input type="password" ng-model="passw1" placeholder="Password"></div></div><div class="form-group"><label class="col-sm-2 control-label">Repeat:</label><div class="col-sm-10"><input type="password" ng-model="passw2" placeholder="Repeat Password"></div></div></form><hr><button class="btn btn-success" ng-disabled="error || incomplete"><span class="glyphicon glyphicon-save"></span> Save Changes</button></div><script src= "myUsers.js"></script></body></html>cs 3. Directives (Used Above) Explained
[ 출처: W3Schools ]AngularJS Directive Description <html ng-app Defines an (unnamed) application for the <html> element <body ng-controller Defines a controller for the <body> element <tr ng-repeat Repeats the <tr> element for each user in users <button ng-click Invoke the function editUser() when the <button> element is clicked <h3 ng-show Show the <h3>s element if edit = true <h3 ng-hide Hide the <h3> element if edit = true <input ng-model Bind the <input> element to the application <button ng-disabled Disables the <button> element if error or incomplete = true
4. Bootstrap Classes ExplainedElement Bootstrap Class Defines <div> container A content container <table> table A table <table> table-striped A striped table <button> btn A button <button> btn-success A success button <span> glyphicon A glyph icon <span> glyphicon-pencil A pencil icon <span> glyphicon-user A user icon <span> glyphicon-save A save icon <form> form-horizontal A horizontal form <div> form-group A form group <label> control-label A control label <label> col-sm-2 A 2 columns span <div> col-sm-10 A 10 columns span [ 출처: W3Schools ]5. JavaScript Code123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051function userController($scope) {$scope.fName = '';$scope.lName = '';$scope.passw1 = '';$scope.passw2 = '';$scope.users = [{id:1, fName:'Hege', lName:"Pege" },{id:2, fName:'Kim', lName:"Pim" },{id:3, fName:'Sal', lName:"Smith" },{id:4, fName:'Jack', lName:"Jones" },{id:5, fName:'John', lName:"Doe" },{id:6, fName:'Peter', lName:"Pan" }];$scope.edit = true;$scope.error = false;$scope.incomplete = false;$scope.editUser = function(id) {if (id == 'new') {$scope.edit = true;$scope.incomplete = true;$scope.fName = '';$scope.lName = '';} else {$scope.edit = false;$scope.fName = $scope.users[id-1].fName;$scope.lName = $scope.users[id-1].lName;}};$scope.$watch('passw1',function() {$scope.test();});$scope.$watch('passw2',function() {$scope.test();});$scope.$watch('fName', function() {$scope.test();});$scope.$watch('lName', function() {$scope.test();});$scope.test = function() {if ($scope.passw1 !== $scope.passw2) {$scope.error = true;} else {$scope.error = false;}$scope.incomplete = false;if ($scope.edit && (!$scope.fName.length ||!$scope.lName.length ||!$scope.passw1.length || !$scope.passw2.length)) {$scope.incomplete = true;}};}cs 6. JavaScript Code Explained
[ 출처: W3Schools ]Scope Properties Used for $scope.fName Model variable (user first name) $scope.lName Model variable (user last name) $scope.passw1 Model variable (user password 1) $scope.passw2 Model variable (user password 2) $scope.users Model variable (array of users) $scope.edit Set to true when user clicks on create user. $scope.error Set to true if passw1 not equal passw2 $scope.incomplete Set to true if any field is empty (length = 0) $scope.editUser Sets model variables $scope.watch Watches model variables $scope.test Tests model variables for errors and incompleteness * 위 강좌는 W3Schools 를 참고하여 작성하였습니다.'Web > AngularJS' 카테고리의 다른 글
[AngularJS] 13.5 API - AngularJS 강좌 (0) 2015.11.20 [AngularJS] 16. Application - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 15. Includes - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 13. 검사(Validations) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 12. 서식(Forms) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 11. 모듈(module) - Angular JS 강좌 (0) 2015.06.12
