0

我正在使用 Angular 1 并创建一个动态表单。它通过循环一些对象并呈现动态绑定的输入字段来工作，例如：

<div class="quest-form form-group" ng-repeat="task in tasks">   
    <div ng-if="task.Class == 'TaskText'" ng-class="'task ' + task.Class">          
        <input ng-model="questForm.Task[task.ID].Value" ng-name="task_{{task.ID}}" ng-required="task.Required == 1" type="text" class="form-control" placeholder="{{task.Title}}"  />
    </div>
    ...
    ...
</div>

我在循环中还有一个上传字段：

<div ng-if="task.Class == 'TaskUpload'" ng-class="'task ' + task.Class">
    <input class="btn btn-primary upload-btn" ngf-max-size="10MB" type="file" ng-model="upload" ngf-multiple="false" ngf-select="uploadFile(upload, task.ID, $invalidFiles)" />
    <input class="" ng-model="questForm.Task[task.ID].FileUploadID" ng-required="task.Required == 1" ng-name="task_{{task.ID}}" type="text" />
</div>

当调用文件上传事件时，我试图设置隐藏字段的值，即 ng-model="questForm.Task[task.ID].FileUploadID"，如下所示：

$scope.uploadFile = function(file,taskID) {
    file.upload = Upload.upload({
        url: assetsURL+'/home/UploadFile',
        data: {file: file}
    });
    file.upload.then(function (response) {
        $scope.questForm.Task[taskID].FileUploadID = response.data; // THIS MESSES UP
    }, function (response) {
        ...
    });
};

我收到以下错误，就像 $scope.questForm.Task[128] 不存在，即使隐藏的输入看起来正确并绑定到 $scope.questForm.Task[128]。

angular.js:14362 TypeError: Cannot read property '128' of undefined
at file.upload.then.$scope.errorMsg (http://localhost/carl-mygps-app/js/controllers/quest-details-controller.js:120:26)
at processQueue (http://localhost/carl-mygps-app/bower_components/angular/angular.js:16689:37)
at http://localhost/carl-mygps-app/bower_components/angular/angular.js:16733:27
at Scope.$eval (http://localhost/carl-mygps-app/bower_components/angular/angular.js:18017:28)
at Scope.$digest (http://localhost/carl-mygps-app/bower_components/angular/angular.js:17827:31)
at Scope.$apply (http://localhost/carl-mygps-app/bower_components/angular/angular.js:18125:24)
at done (http://localhost/carl-mygps-app/bower_components/angular/angular.js:12233:47)
at completeRequest (http://localhost/carl-mygps-app/bower_components/angular/angular.js:12459:7)
at XMLHttpRequest.requestLoaded (http://localhost/carl-mygps-app/bower_components/angular/angular.js:12387:9) Possibly unhandled rejection: {}

我尝试在范围内定义空白对象，例如：

$scope.questForm = [];
$scope.questForm.Task = {};

但我应该不需要，因为它们是在模板中创建的？使困惑。谢谢大家。

4

1 回答 1

1

其实没有。编译模板并不意味着所有ng-models 都已初始化。虽然ng-model它足够聪明，可以创建所有中间对象，但如果它们不存在，则在$viewValue更改之前不会这样做。在您的情况下，如果您在没有先编辑任何其他输入的情况下上传文件，$viewValue因为输入从未更改过，因此您必须初始化questForm,questForm.Task和您questForm.Task[taksID]自己。

if (!$scope.questForm) {
  $scope.questForm = {};
}
if (!$scope.questForm.Task) {
  $scope.questForm.Task = {};
}
if (!$scope.questForm.Task[taskID]) {
  $scope.questForm.Task[taskID] = {};
}
$scope.questForm.Task[taskID].FileUploadID = response.data;

或者您可以在开始时初始化questForm和。并且只在初始化之前questForm.Task检查是否存在。questForm.Task[taskID]

于 2017-07-26T06:15:19.407 回答