반응형
SMALL
Step02_controller2 만들고
input 요소에 뭔가를 적고 추가를 누르면
li에 추가가 되게 하고 싶어
msg 라는 모델을 만들고 빈 배열을 생성을 해
이렇게 해주면 페이지가 처음 생성되는 시점에 뿌려 질거야
이렇게 출력이 됌
ng-modle="msg" 해준것이
$scope.msg 라고 알려주는 것임
이렇게 하면 들어가긴 하는데
똑같은걸 여러번 넣으면 안들어감
그래서 object 로 바꿔 줄 것임
이렇게 object로 바꿔주면 여러번도 들어감
이제 모두 삭제하는 것을 해 볼거야
모두삭제 버튼을 누르면 빈 배열로 만들어 버리는 것임
입력창 초기화 하는 것도 추가
$scope.msg 는 컨트롤러 안에 모델을 가르킴
추가할걸 입력하고 추가 버튼을 누르면 input 창이 초기화 됌
모두 삭제를 누르면
모두 사라지고
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 | <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Step02_controller2.html</title> <script src="js/angular.min.js"></script> <script> // angular 모듈 만들기 var myApp=angular.module("myApp",[]); // Ctrl1 이라는 이름의 컨트롤러 만들기 myApp.controller("Ctrl1",["$scope", function($scope){ $scope.msgs=[]; $scope.addClicked=function(){ //입력한 문자열을 이용해서 object 를 만든다. var obj={msg:$scope.msg}; //만든 object 를 배열에 추가 $scope.msgs.push(obj); //입력창 초기화 $scope.msg=""; }; $scope.clearAll=function(){ $scope.msgs=[]; }; }]); </script> </head> <body> <div ng-controller="Ctrl1"> <input type="text" ng-model="msg"/> <button ng-click="addClicked()">추가</button> <button ng-click="clearAll()">모두삭제</button> <ul> <li ng-repeat="tmp in msgs">{{tmp.msg}}</li> </ul> </div> </body> </html> | cs |
반응형
'FrameWork > AngularJS' 카테고리의 다른 글
| Step04_showHide (0) | 2017.08.25 |
|---|---|
| Step03_class (0) | 2017.08.25 |
| Step02_controller (0) | 2017.08.25 |
| Step01_click (0) | 2017.08.25 |
| AngularJS 설치 및 HelloWorld (0) | 2017.08.25 |
