AngularJS ng型輸入值

我有輸入值和當我添加ng-model到每個輸入，值不顯示。這裏是我的代碼：AngularJS ng型輸入值

學生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">

輸入值將不再顯示。我在這裏錯過了什麼嗎？

來源

2015-10-04 FewFlyBy

<input />的值會被第一個摘要中由ng-model引用的變量的值寫入。

當您使用ng-model時，您聲明瞭雙向綁定。 Angular將在每個摘要上同步<input />的值與引用變量，反之亦然。

而不是使用value屬性設置<input />的初始值，將ng-model引用的變量設置爲所需的初始值。

來源

2015-10-04 11:25:41 hally9k

ng-model指令將爲您設置值。就在您的標記和組NG-模型中的價值刪除對

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

下一次，請提供plunkr /的jsfiddle等。

Regards

來源

2015-10-04 11:26:23 apairet

謝謝。我如何獲得這些值，如果我想要例如更新數據？通常我用$ scope.editForm得到它，例如 – FewFlyBy

只要執行'$ scope.student [0] .fname ='newFirstName'' – apairet

AngularJS ng型輸入值

回答

相關問題