Javascript Angularjs绑定在复杂对象数组上不起作用

鉴于此控制器：

 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>  

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

但是，在单击第一个表中的行之前，不会更新任何内容，您可以看到，第一个表在我的控制器上触发setSelected函数

当NewFiles属性也发生更改时，我如何获得刷新

对不起，刚修好小提琴-原来忘了保存

---

看这个。首先单击测试上传。现在选择文件。什么也没发生。再次单击Test Upload，您将看到所有绑定都被刷新。

angular to input type=file没有提供默认绑定，因此您可能需要创建自己的指令或使用库

从stackoverflow中查看这个

使用$apply：

---

这通常是由angular完成的，但由于您在更改时使用的是本机js事件，因此您必须自己将其包装在$apply回调中。

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

$scope.selectedUpload = null;

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

未捕获的TypeError:无法将属性“NewFiles”设置为null

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

下一个问题是更新当前选择的上载列表，只需使用$scope.$apply，因为您正在使用本机事件onchange来更新$scope。您的回调应该如下所示：

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

---

检查此更新。

我实际上没有绑定到输入类型=文件。问题在于我的表元素上绑定到控制器上属性的其他绑定。请参阅我的jsFiddle.yes，但onchange=angular.element this.scope.vm.addfilestoupload此方法绑定到input type=filethanky Marcel。顺便说一句，如果你看一下我在上面这篇文章中包含的代码，我使用的模式与我在JSFIDLE中使用的不同。。。我不注射示波器。是否有一种方法可以在不使用$scope的情况下使用apply，或者我必须将$scope传递给我的控制器？.controller'upload'，['$scope'，upload]；函数upload$scope{应该适用于该函数。。。

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