Question

我有一个编辑表单，使用express和angular将数据推送到mongo db。我正在使用ng-model作为我的数据。 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'
    })

}]);

我的HTML

<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>

Answer 1

您可以通过以下方式设置整个对象以接收response.data：

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

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

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

1 个答案: