ng-model 作为表单上的初始输入

ng-model as initial input on form

本文关键字：输入 表单 ng-model      更新时间：2023-09-26

我有一个编辑表单，它使用快速和角度将数据推送到 mongo db。我正在使用ng模型作为我的数据。PUT 可以正常工作以更新数据库。但我似乎无法将找到的数据作为 GET 输入字段的初始值。我认为我绑定错误。如果是这样的话，我做错了什么？提前谢谢。

我的控制器 

app.controller('EditController', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {
    var self = this;
    $http({
        method: 'GET',
        url: '/users/' + $routeParams.id,
        data: $routeParams.id
    }).then(function(response) {
        // console.log(response.data);
        self.id = $routeParams.id;
        self.name = response.data.name;
        self.age = response.data.age;
        self.gender = response.data.gender;
        self.img = response.data.img;
    });
    this.editForm = function() {
            console.log('editForm');
            console.log('Formdata: ', this.formdata);
            $http({
                method: 'PUT',
                url: '/users/' + $routeParams.id,
                data: this.formdata,
            }).then(function(result) {
                self.formdata = {}
            });
    } // end editForm
}]);
// end EditController
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
    $locationProvider.html5Mode({enabled:true});
    $routeProvider.when('/', {
        templateUrl: 'partials/match_partial.html'
    }).when('/edit/:id', {
        templateUrl: 'partials/edit_partial.html',
        controller: 'EditController',
        controllerAs: 'editctrl'
    })
}]);

我的网页

<div>
    <a ng-href="/">
        <br>
        <h3 class="back">Back to Match</h3>
    </a>
    <h1 class="editHeader">
        Edit {{editctrl.name}}    
    </h1>
    <form ng-submit="editctrl.editForm()">
        <input type="text" ng-model="editctrl.formdata.id" placeholder="{{editctrl.id}}">
        <input type="text" ng-model="editctrl.formdata.name" placeholder="{{editctrl.name}}">
        <input type="text" ng-model="editctrl.formdata.age" placeholder="{{editctrl.age}}">
        <input type="text" ng-model="editctrl.formdata.gender" placeholder="{{editctrl.gender}}">
        <input type="text" ng-model="editctrl.formdata.img" placeholder="{{editctrl.img}}">
        <input type="submit">
    </form>
</div>

您可以简单地设置整个对象以接收response.data，这样： 

$http({
  method: 'GET',
  url: '/users/' + $routeParams.id,
  data: $routeParams.id
}).then(function(response) {
  // console.log(response.data);      
  // Here 
  self.formdata = response.data;
});

它将自动使用对象属性填充所有输入。

相关文章：