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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <!DOCTYPE html> <html data-ng-app="myApp"> <head> <meta charset="UTF-8"> </head> <body id="listController" data-ng-controller="listController"> <input type="text" data-ng-model="foo"/> <div> <ul> <li data-ng-repeat="(idx, el) in list"> <!-- $index {number} – 현재 반복 요소의 오프셋 (0부터 length-1까지) $first {boolean} – 현재 반복 요소가 첫번째 요소이면 true $middle {boolean} – 현재 반복 요소가 처음도 끝도 아니면 true $last {boolean} – 현재 반복 요소가 마지막 요소이면 true $even {boolean} – 현재 반복 요소가 짝수 요소이면 true $odd {boolean} – 현재 반복 요소가 홀수 요소이면 true --> <p>배열의총길이 : {{list.length}}</p> <p data-ng-show="$first"> -- 첫번째요소 -- </p> <p data-ng-show="$last"> --마지막요소 -- </p> <p>{{idx}}</p> <p>{{el.name}}</p> <button data-ng-click="removeList(list, $index)">삭제</button> </li> </ul> </div> <button data-ng-click="addList(list, $event)">AngularJS동적리스트 추가</button> <button id="insert">jQuery동적리스트 추가</button> <script type="text/javascript" src="lib/jquery/2.2.3/jquery.min.js"></script> <script type="text/javascript" src="lib/AngularJS/1.3.15/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp",[]); myApp.controller("listController", function($scope){ $scope.foo = "테스트"; $scope.list = [ {"name" : "홍길동", "age" : "50"}, {"name" : "김길동", "age" : "150"}, {"name" : "박길동", "age" : "250"}, {"name" : "고길동", "age" : "350"}, {"name" : "천길동", "age" : "450"} ]; // 리스트 추가 $scope.addList = function(list, $event) { this.list.push({ // 여기서 this란 표현이 맞나? $scope란 표현이 맞나?? "name" : "네이버", "age" : "000" }); } // 리스트삭제 $scope.removeList = function(list, $index) { this.list.splice($index, 1); } // $watchCollection 배열의 변화체크(길이)가 변할때 콜백함수가 수행된다. $scope.$watchCollection("list", function(list) { console.log(list); }); // $watch 특정변수의 값의 변화를 체크하고 변할때 콜백함수가 수행된다. $scope.$watch('foo', function(newValue, oldValue) { console.log("foo값이변했어요"); }); }); $("#insert").click(function() { var scope = angular.element('#listController').scope(); // 외부에서 앵귤러 js내부에 (변수나 객체)접근해야 할때... console.log(scope); scope.foo = "테스트"; scope.addList(); scope.$apply(); // 외부(jQuery)에서 list에 추가했을때 동적반영이 안되므로 $apply()를 통해 동적반영되게 한다. }); </script> </body> </html> |
반응형
'AngularJS' 카테고리의 다른 글
| [AngularJS] 컨트롤간 데이터 공유 (0) | 2019.02.27 |
|---|---|
| [AngularJS] 동적요소삽입 ng-bind-html (0) | 2017.03.28 |
| [AngularJS] 앵귤러js 컨트롤러간 데이터 공유 (0) | 2016.12.26 |
