Question

鉴于此控制器：

 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>

我希望当输入onchange事件调用addFilesToUpload()并将文件添加到NewFiles属性时，Angularjs会自动更新视图...在这种情况下，{{1第一个表中的值和列出文件的第二个表。

但是，在我点击第一个表格中的行之前，没有任何内容正在更新，正如您所看到的那样，它会在我的控制器上触发setSelected函数。

如果{{up.NewFiles.length}}属性也被更改，我怎样才能刷新Angular？

抱歉，只是修复了小提琴 - 忘了保存原来 见jsfiddle。首先单击“测试上载”。现在选择文件。什么都没发生。再次单击“测试上载”，您将看到所有绑定都已刷新。

Answer 1

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

从stackoverflow中查看此answer。

Answer 2

使用$apply（DEMO）：

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

这通常是通过角度来完成的，但因为您使用的是本机js事件onchange，您必须自己将其包装在$apply回调中。

Answer 3

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

$scope.selectedUpload = null;

当您选择文件并调用回调addFilesToUpload()并将所选文件分配到$scope.selectedUpload.NewFiles = element.files;时，您肯定会收到错误：

未捕获的TypeError：无法设置属性＆＃39; NewFiles＆＃39;为null

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

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

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

检查此更新 fiddle 。

Angularjs绑定不能处理复杂对象的数组

3 个答案: