Angular JS 1 사용해서 todo 만들기 (feat. Bootstrap)

< !DOCTYPE html >

< html >

< head >

< link data-require = "bootstrap@4.1.3" data-semver = "4.1.3" rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" / >

< script data-require = "bootstrap@4.1.3" data-semver = "4.1.3" src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" > < / script >

< script data-require = "angularjs@1.5.7" data-semver = "1.5.7" src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" > < / script >

< link rel = "stylesheet" href = "style.css" / >

< script src = "script.js" > < / script >

< / head >

< body ng-app = "todo" ng-controller = "TodoCtrl" >

< div class = "container" >

< h1 > todo list < / h1 >

< ul class = "list-unstyled" >

< li ng-repeat = "todo in todos | filter:statusFilter" >

< div class = "input-group mb-3" >

< div class = "input-group-prepend" >

< div class = "input-group-text" >

< input type = "checkbox" aria-label = "Checkbox for following text input" ng-model = "todo.completed" / >

< / div >

< / div >

< input type = "text" class = "form-control" aria-label = "Text input with checkbox" ng-model = "todo.title" / >

< div class = "input-group-append" >

< button class = "btn btn-danger" type = "button-" id = "button-addon2" ng-click = "remove(todo)" > 삭제 < / button >

< / div >

< / div >

< date > {{ todo.createdAt | date:'yyyy-MM-dd HH:mm:ss' }} < / date >

< / li >

< / ul >

< button class = "btn btn-primary" ng-click = "statusFilter={completed:true}" > Completed < / button >

< button class = "btn btn-primary" ng-click = "statusFilter={completed:false}" > Active < / button >

< button class = "btn btn-primary" ng-click = "statusFilter={}" > All < / button >

< / div >

< / body >

from http://javannspring.tistory.com/247 by ccl(A) rewrite - 2020-03-07 04:21:08