ng-model 未绑定到 ng-repeat 中的输入数据

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 =""; 默认情况下它为空，正如您所描述的，但是对于您的所有输入，您将拥有一个数据绑定，我认为您应该有一些 $scope.data={}; tr data-ng-repeat="(key, value) in projects" > <input data-ng-model="data[key]"> </tr> 而且你不需要在你的输入中设置值，ng-model 会为你做的

Answer 2

您正试图访问在ng-repeat 范围内定义的变量。在这种情况下，您想要做的是传递 value 并在 update 函数内处理 project 变量。

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

内部更新你应该这样做

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