Question

我正在使用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 = {};

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

Answer 1

其实没有。编译模板并不意味着所有ng-model都已初始化。虽然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]是否存在。

Angular 1动态表单对象

1 个答案: