javascript - AngularJS ng-model 输入值

Question

我的输入具有值，当我向每个输入添加 ng-model 时，该值不会显示。这是我的代码:

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);
        });

    }
}

这实际上是有效的，但是如果我在输入中添加模型，例如:

<input id="first_name" value="{{student[0].fname}}" type="text" class="validate" ng-model="editForm.fname">

输入值将不再显示。我在这里遗漏了什么吗？

Answer 1

<input />的值被 ng-model 引用的变量的值覆盖。在第一个摘要上。

当您使用ng-model时，您正在声明双向绑定(bind)。 Angular 将同步 <input />的值与引用的变量的值，反之亦然。

而不是设置你的 <input />使用 value 的初始值属性设置 ng-model 引用的变量到所需的初始值。