AngularJS 맛보기!

동적으로 리스트에 아이템 추가해보기

by ipark

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<div ng-app>
    <h1> Testing AngularJS! </h1>
    <ul ng-controller='StudentListController'>
        <li ng-repeat='student in students'>
            <span>{{student.id}} : {{student.name}}</span>
        </li>
        <form ng-submit='addStudent()'>
            <input type='text' ng-model='name' size='30'>
            <input class='btn-primary' type='submit' value='add'>
        </form>
    </ul>
</div>

JavaScript

var students = [{name:'성현', id:'1'},
                {name:'한종', id:'2'},
                {name:'성우', id:'3'}]

function StudentListController($scope) {
    
    $scope.students = students;
    
    $scope.addStudent = function() {
        $scope.students.push({name:$scope.name, id:$scope.students.length+1});
        $scope.name = '';        
    };
}