I encounter a challenge where my inputs, containing values, do not display the value when I apply an ng-model to each input field. Below is the snippet of my code:
student-list.html
<!--edit form-->
<div class="col s12" ng-show="dataForm">
<div class="row">
<div class="input-field col l6 s12">
<input id="first_name" value="{{student[0].fname}}" type="text" class="validate">
<label class="active" for="first_name">First Name</label>
</div>
<div class="input-field col l6 s12">
<input id="last_name" value="{{ student[0].lname }}" type="text" class="validate">
<label class="active" for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col l6 s12">
<input id="email" value="{{ student[0].email }}" type="text" class="validate">
<label class="active" for="email">E-mail Address</label>
</div>
<div class="input-field col l6 s12">
<input id="age" value="{{ student[0].age }}" type="text" class="validate">
<label class="active" for="age">Age</label>
</div>
</div>
<button class="btn waves-effect waves-light" ng-click="updateStudent()">Submit
<i class="material-icons right">send</i>
</button>
<button class="btn waves-effect waves-light pink accent-3" ng-click="cancelEditStudent()">Cancel</button>
</div>
<!-- form -->
<table class="highlight responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="s in students | filter:searchStudent" ng-show="studentsPanel">
<td>{{ s.fname }} {{ s.lname }}</td>
<td>{{ s.age }}</td>
<td>{{ s.email }}</td>
<td><a href="javascript:void(0)" ng-click="editStudent(s.id)">Edit</a> <a href="javascript:void(0)" ng-click="deleteStudent(s.id)">Delete</a></td>
</tr>
</tbody>
</table>
studentController.js
angular
.module('studentInfoApp')
.factory('Student', Student)
.controller('StudentsController', StudentsController)
.config(config);
function config($routeProvider) {
$routeProvider
.when('/', {
controller: 'StudentsController',
templateUrl: 'app/views/student-list.html'
})
.otherwise({
redirectTo: '/'
});
}
function Student($resource) {
//return $resource('/students/:id');
return $resource("/students/:id", {}, {
'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'}
});
}
function StudentsController(Student, $scope, $http) {
$scope.editStudent = function(id) {
Student.query({ id: id }, function(data, headers) {
$scope.student = data;
$scope.dataForm = true;
}, function (error) {
console.log(error);
});
}
}
The existing setup functions correctly, however, if I introduce an Angular model in an input element as shown below:
<input id="first_name" value="{{student[0].fname}}" type="text" class="validate" ng-model="editForm.fname">
the input value fails to render. Is there something crucial that I am overlooking here?