Question

我遇到了一个问题，即使列表更新，ngRepeat也不会显示信息。

在下面的代码中，使用文件输入选择图像时，会添加$scope.selectedImages数组。它的设置是为了只将唯一文件添加到selectedImages列表中（无重复项）。

在函数结束时，scope.selectedImages使用新值打印数组，但在视图中，ngRepeat不会添加带有图像名称的新列表项。

关于这个问题的其他问题说$scope.$apply应该解决问题，但对我来说不是。我使用它错了还是还有其他我误解的东西。

编辑：查看1 和查看2 位于单独的HTML页面中，这两个页面都依赖于同一个控制器。

查看1：

<input type="file" multiple accept="image/*" class="file-input" id="img-upload-btn" onchange="angular.element(this).scope().select(this)">
<md-button class="md-primary md-raised sidenav-btn" ng-click="proxy('img-upload-btn')">
  Select <strong>Images</strong>
</md-button>

代理功能允许md-button点击输入。

查看2：

<div layout-padding flex ng-controller="upload-controller">
  <ul>
    <li ng-repeat="im in selectedImages">{{im.name}}</li>
  </ul>
</div>

控制器：

$scope.selectedImages = [];
$scope.select = function(element) {
  $scope.$apply(function(scope) {
    var justFiles = $.map(element.files, function(val, key) {
      return val;
    }, true);

    var fileEquality = function(f1, f2) {
      if (f1.name != f2.name) return false;
      if (f1.size != f2.size) return false;
      if (f1.type != f2.type) return false;
      if (f1.lastModified != f2.lastModified) return false;
      return true;
    }

    // inefficient, find better way later
    for (i in justFiles) {
      var contains = false;
      var file = justFiles[i];
      for (i in scope.selectedImages) {
        if (fileEquality(file, scope.selectedImages[i])) {
          contains = true;
          break;
        }
      }
      if (!contains) scope.selectedImages.push(file);
    }
    console.log(scope.selectedImages);
  });
};

Answer 1

您的输入字段模板和控制器模板必须具有不同的范围。在您的情况下使用$rootScope.selectedImages。

即使列表是，ngRepeat也不会更新

1 个答案: