Live Code Editor Version 2.0

[AngularJS] - Bài 10: ngForm 1 RUN

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ví dụ sử dụng Directive ng-Form</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
        <script>
            angular.module('myapp', [])
                    .controller('ExampleController', ['$scope', function($scope) {
                    // Khởi tạo giá trị ban đầu cho list = [];
                    $scope.list = [];
                    
                    // Khi submit form thì chạy hàm này
                    $scope.submit = function() 
                    {
                        // nếu người dùng có nhập nội dung thì lưu nó vào list
                        if ($scope.text) 
                        {
                            $scope.list.push(this.text);
                            
                            // đồng thời xóa dữ liệu trong thẻ input
                            $scope.text = '';
                        }
                    };
                }]);
        </script>
    </head>
    <body ng-app="myapp">
        <form ng-submit="submit()" ng-controller="ExampleController">
            Nhập tên sinh viên
            <input type="text" ng-model="text" name="text" />
            <input type="submit" id="submit" value="Thêm" /> <br/>
            Danh sách sinh viên: <pre>list={{list}}</pre>
        </form>
    </body>
</html>