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型输入值

回答

相关问题