Angularjs绑定不能在复杂对象数组上工作

Angularjs binding not working on array of complex object

本文关键字：数组 工作 对象 复杂 绑定 不能 Angularjs      更新时间：2023-09-26

给定这个控制器:

 angular.module("upload.app").controller("upload",[upload]);
 function upload(){
    var me = this;
     me.uploadList = [{Name: "Test Upload",
                       Id: 1,
                       NewFiles: []
                     }];
     me.selectedUpload = me.uploadList[0];
     me.setSelected = function(upload) {
        me.selectedUpload = upload;
     }
     ...
     me.addFilesToUpload = function(element){
        me.selectedUpload.NewFiles = element.files;
     }

和这个html:

   <div ng-controller="upload as vm">
       <input id="filechooser" type="file" multiple onchange="angular.element(this).scope().vm.addFilesToUpload(this)" />
       <table>
          <tbody>
             <tr ng-repeat="up in vm.uploadList" ng-click="vm.setSelected(up)">
                 <td>{{up.Name}}<br />{{up.NewFiles.length}}</td>
             </tr>
          </tbody>
       </table>
       <table>
           <tbody>
              <tr ng-repeat="file in vm.selectedUpload.NewFiles">
                 <td>{{file.name}}</td>
              </tr>
           </tbody>
       </table>
   </div>

我希望当input onchange事件调用addFilesToUpload()，然后文件被添加到NewFiles属性时，Angularjs会自动更新视图…在本例中，第一个表中的{{up.NewFiles.length}}值和第二个表中列出的文件。

但是，在我单击第一个表中的行之前，什么都没有更新，正如您所看到的，它在我的控制器上触发了setSelected函数。

我怎么能得到Angular刷新时，NewFiles属性也改变了?

对不起，只是修复了小提琴-忘记保存它原来看看这个。首先单击Test Upload。现在选择文件。什么也不会发生。再次点击Test Upload，你会看到所有的绑定都刷新了。

使用$apply (演示): 

$scope.$apply(function() {
    $scope.selectedUpload.NewFiles = element.files;
});

这通常是由angular完成的，但是因为你使用的是原生js事件onchange，所以你必须自己把它包装在$apply回调中。

angular没有提供默认绑定来输入type=file https://github.com/angular/angular.js/issues/1375，所以你可能需要创建自己的指令，或者你可以使用angular-file-upload库。

看看这个答案从stackoverflow。

更新后的提琴的问题主要是这一行

$scope.selectedUpload = null;

选择文件并调用回调addFilesToUpload()，并将所选文件分配给$scope.selectedUpload.NewFiles = element.files;，那么您肯定会得到一个错误:

Uncaught TypeError: Cannot set property 'NewFiles' of null

只需将其更改回原始代码:$scope.selectedUpload = $scope.uploadList[0];

下一个问题是更新当前选择的上传列表，只需使用$scope.$apply()，因为您正在使用本地事件onchange来更新$scope。你的回调应该是这样的:

 $scope.addFilesToUpload = function(element){
     $scope.$apply(function() {
        $scope.selectedUpload.NewFiles = element.files;     
     });
 }
<<p>检查这个更新strong>小提琴。
相关文章：