Angular 1 объект динамической формы

Я использую 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 = {};

Но мне не нужно, потому что они созданы в шаблоне? смущенный. Спасибо всем.


arrays angularjs angularjs-directive angularjs-model angularjs-bindings
person Jamie Barker    schedule 26.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле нет. Скомпилированный шаблон не означает, что все 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] перед его инициализацией.

person xReeQz    schedule 26.07.2017
comment
Вы, сэр... Бог! Большое спасибо :) - person Jamie Barker; 26.07.2017