'Can't get value from form in AngularJS

enter image description here

I tried this student manager in HTML+ java last time. So now I want to try in angularJS. When I finished my code, it doesn't seem to work.

There are no error in console so I don't know where I went wrong. Can someone help me to figure out what the error is here?

HTML

<div ng-controll="MyController">
    <form role="form" ng-submit="saveStudent()">
        <div class="form-group mt-2">
            <label for="" class="form-label">Student Name: </label>
            <input type="text" required placeholder="Enter student name" class="form-control" ng-model="name">
        </div>
        <div class="form-group mt-2">
            <label for="" class="form-label">Student DOB: </label>
            <input type="date" placeholder="mm/dd/yyyy" class="form-control" ng-model="birth">
        </div>
        <div class="form-group mt-2">
            <label for="" class="form-label">Student Gender: </label>
            <input type="radio" name="sex" value="male" ng-model="sex" id="male"> 
            <label for="male">Male</label>
            <input type="radio" name="sex" value="female" ng-model="sex" id="female"> 
            <label for="female">Female</label>
        </div>
        <div class="form-group mt-2">
            <label for="" class="form-label">Student Language: </label>
            <label for="" ng-repeat="language in languagesList">
                <input type="checkbox" value="{{language.name}}" ng-checked="checkboxModel.indexOf(language) > -1" ng-click="addLanguage(language)">{{language}}
            </label>
        </div>
        <div class="form-group mt-2">
            <label for="">Student Class: </label>
            <select name="student_class" class="form-control" ng-model="studentclass">
                <option value="">---Select---</option>
                <option value="{{ item }}" ng-repeat="item in classList">{{ item }}</option>
            </select>
        </div>

        <div class="form-group mt-2 pb-3">
            <button class="btn btn-danger" type="submit">Add</button>
        </div>
    </form>
<br><br><br>
<div class="card-table " style="margin-top: 20px;">
    <h2 style="text-align: center;">Student List</h2>
    <div class="content">
        <table border="1">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Class</th>
                    <th>DOB</th>
                    <th>Gender</th>
                    <th>Language</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in studentList track by $index">
                    <td>{{ item.name }}</td>
                    <td>{{ item.studentclass }}</td>
                    <td>{{ item.birth | date}}</td>
                    <td>{{ item.sex }}</td>
                    <td>
                        <div ng-repeat="checkbox in item.checkboxModel">
                        {{ checkbox }}
                        </div>
                    </td>
                    <td>
                        <a href="#" class="btn btn-danger" ng-click="removeStudent($index)" style="color: blue;">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>

Angular JS

var app = angular.module('MyApp', []);
app.controller('MyController', ['$scope', function ($scope) {
$scope.studentList = [];

$scope.classList = ['C2108G1',
  'C2108G2',
  'C2108G3',
  'C2108G4',
  'C2108G5',
  'C2108L'
];

$scope.languagesList = [
  'English',
  'Vietnamese',
  'Japanese',
  'Chinese',
  'French'
];

$scope.checkboxModel = [];

$scope.addLanguage = function (language) {
  var index = $scope.checkboxModel.indexOf(language);
  if (index > -1) {
    $scope.checkboxModel.splice(index, 1);
  } else {
    $scope.checkboxModel.push(language);
  }
}

$scope.saveStudent = function () {
  var item = {
    'name': $scope.name,
    'birth': $scope.birth,
    'sex': $scope.sex,
    'studentclass': $scope.studentclass,
    'checkboxModel': $scope.checkboxModel,
  }
  if ($scope.currentIndex >= 0) {
    $scope.studentList[$scope.currentIndex] = item;
    $scope.currentIndex = -1;

  } else {
    $scope.studentList.push(item);
  }
}

$scope.currentIndex = -1;

$scope.removeStudent = function (index) {
  var option = confirm('Are you sure you want to remove this student?');
  if (!option) return;
  $scope.studentList.splice(index, 1);
}
}]);


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source