Question

使用AngularJs 1.6.7，我创建了一个表，该表从数据库中提取项目详细信息并在表中显示这些详细信息。每行都有一个使用ng-show / hide的修改/更新按钮。单击“修改”时，div将更改为可编辑的输入字段，单击“更新”时，新的输入数据将在数据库中更新。

我试图访问ng-repeat中的输入项，并使用ng-model绑定输入以使用Flask更新数据库中的项目。

问题在于，单击更新后，当我在AJS中访问数据时，没有数据绑定到新的输入值。

我的HTML看起来像这样。

     <tr data-ng-repeat="(key, value) in projects" >
          <td>
              <div data-ng-hide="edditable_project[value.project_name]">{[value.project_name]} 
              </div>
              <div data-ng-show="edditable_project[value.project_name]">
                  <input class="form-control" data-mg-model="updatedProjectName" value="{[value.project_name]}">
              </div>
          </td>
          <td>
              <button class="btn btn-danger add-on pull-right btn-sm"  data-ng-click="removeProject(value)">Delete</button>
              <button class="btn btn-primary add-on btn-sm pull-right" data-ng-hide="edditable_project[value.project_name]" data-ng-click="modify(value.project_name)">Modify</button>
               <button type="submit" class="btn btn-success pull-right btn-sm " data-ng-show="edditable_project[value.project_name]" data-ng-click="update(value)">Update</button>
         </td>
     </tr>

我的控制器如下所示：

app.controller('projectSettingsController', ['$scope', '$http', function($scope, $http) {

$scope.modify = function(project) {
    $scope.edditable_project[project] = true;
};

$scope.update = function(project) {
    data = {
                project_name: $scope.updatedProjectName,
            }
    console.log($scope.updatedProjectName);
    // Update project.
    $http.post('/api/project/update-project', data).then(function(response) {
        toastr.success(response.data);
    });

    $http.get('/api/project/get-all-project-details').then(function (response) {
        $scope.projects = response.data;
    });
    $scope.edditable_project[project] = false;

  };
}]);

ng-model =“ updatedProjectName”的当前输出未定义。

我在范围内做错了吗？

Answer 1

好，您应该在控制器的范围内定义绑定变量，例如 $scope.updatedProjectName ="";默认为您所描述的null，但是对于所有输入，您将具有一个数据绑定，我认为您应该具有一些 $scope.data={}; tr data-ng-repeat="(key, value) in projects" > <input data-ng-model="data[key]"> </tr> 而且您不需要在输入中设置值，ng-model就会为您实现

Answer 2

您正在尝试访问在ng-repeat范围内定义的变量。在这种情况下，您需要做的是传递value并在project函数内的update变量上进行操作。

最多将您的标记更改为data-mg-model="value.project_name"。现在，ng-model绑定到相同的对象。更新完成后，将最新数据（如果需要）设置为project上的属性。由于两种方式的数据绑定，它将反映在视图中

在内部更新中，您应该执行以下操作

$scope.update = function(project) {

  // Update project.
  $http.post('/api/project/update-project', project).then(function(response) {
    toastr.success(response.data);
    // If needed set new properties on the project variable
    // based on the response
  });

}

Answer 3

您似乎有错字：

<input class="form-control" data-mg-model="updatedProjectName" value="{[value.project_name]}">

使用ng-model代替mg-model。

ng模型未绑定到ng-repeat

3 个答案: