Tôi có 2 quan điểm. Một là để liệt kê học sinh trong một bảng và hai là khi bạn nhấp vào một học sinh, nó sẽ hiển thị các thông tin chi tiết của học sinh đó. Tôi đã đưa học sinh đến lớp riêng của nó trong một tệp riêng student.js. Vấn đề là, thông tin chi tiết của học sinh không được điền vào chế độ xem.
Tôi sẽ trình bày bộ điều khiển và chế độ xem để biết chi tiết về học sinh cùng với lớp học sinh.
Nguyên mẫu của sinh viên như một nhà máy ở student.js:
// idea: You can initialize a student like new Student(student)
//where student is a json else new Student() will return a student with
//attributes set to null.
app.factory('Student', ['$http', function($http) {
function Student(student) {
if (student) {
this.setStudent(student);
} else {
this.setStudent({
id: null,
name: null,
level: null,
schoolName: null,
phoneNumber: null,
email: null
});
}
};
Student.prototype = {
setStudent: function(student) {
angular.extend(this, student);
},
loadStudent: function(studentId) {
var scope = this;
$http.get('myUrl/' + studentId).then(function(response){
scope.setStudent(response.data);
});
}
};
return Student;
}]);
Bây giờ tôi sử dụng nguyên mẫu Sinh viên ở trên trong studentDetailsCtrl:
app.controller('studentDetailsCtrl', ['$scope', '$stateParams', 'Student', function($scope, $stateParams, Student) {
$scope.student = new Student();
$scope.student.loadStudent($stateParams.studentId);
}]);
Ở đây loadStudent()lấy id của sinh viên hiện tại từ url và đặt các thuộc tính của sinh viên.
Xem chi tiết sinh viên:
<div ng-controller="studentDetailsCtrl">
<div class="wrapper-md bg-light b-b">
<h1 class="m-n font-thin h3">Student Details</h1>
</div>
<div class="hbox hbox-auto-xs hbox-auto-sm">
<div class="col wrapper-md">
<form name="student" class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Name: </label>
<div class="controls col-sm-5">
<p class="form-control-static">{{ student.name }}</p>
</div>
</div>
</div>
</form>
</div>
</div>
Tôi đang làm gì sai? Đánh giá cao bất kỳ sự giúp đỡ nào!
