【问题标题】:ngRepeat not updating even though list is即使列表是 ngRepeat 也不更新
【发布时间】:2016-07-05 10:19:12
【问题描述】:

我遇到了一个问题,尽管列表正在更新,但 ngRepeat 不显示信息。

在下面的代码中,当使用文件输入选择图像时,$scope.selectedImages 数组被添加到。它被设置为只有唯一的文件将被添加到 selectedImages 列表中(没有重复)。

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

关于这个问题的其他问题说$scope.$apply 应该解决这个问题,但对我来说不是。我是用错了还是有其他什么我误解了。

编辑:View 1View 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);
  });
};

【问题讨论】:

  • 您的控制器中没有 $scope.uploadedImages!这个模型是空的!
  • @HanArantes 哎呀!我复制了该代码的旧版本。即使使用 selectedImages,也会出现问题并且没有显示任何内容。我在较新的代码中进行了编辑。

标签: javascript angularjs file angularjs-scope angularjs-ng-repeat


【解决方案1】:

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

【讨论】:

  • file 输入字段放置在控制器模板中吗?
  • 这实际上可能是问题所在。我有两个依赖于控制器的 html 文件,一个是用于上传的侧边栏,其中包含输入,另一个是应该显示文件的视图。有什么办法可以让这些分开吗?
  • 在您的情况下,您的控制器和输入字段具有不同的范围,这就是您看不到更改的原因。尝试在$rootScope中定义selectedImages。
  • 成功了!谢谢,如果您编辑您的答案,我将编辑我的问题以包含有关依赖控制器并接受您的答案的两个独立 html 文件的信息!
猜你喜欢
  • 2015-04-04
  • 1970-01-01
  • 1970-01-01
  • 2018-12-06
  • 1970-01-01
  • 2020-12-07
  • 2019-04-22
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多