javascript - AngularJS - 当数据插入数组时,ng-repeat 和绑定(bind)未更新

标签 javascript angularjs ajax

我是 angularjs 的新手,我已经读过,使用 ng-bind,当数据源数组更改时,您必须调用 $scope.apply() 来更新输出。但我还读到,当您使用ng-repeat时,它应该像魅力一样工作并且开箱即用。以下情况不会显示页面中的所有元素:

<body ng-app="gallery">
  <div ng-controller="GalleryController">
      {{imageFolder}}
      <div class="uk-child-width-1-5 uk-grid-small" uk-grid>
          <div ng-repeat="image in imageFolder">
              hier
          </div>
      </div>
  </div>
</body>

还有 JS:

let gallery = angular.module('gallery', []);

        gallery.controller('GalleryController', function($scope) {

            $scope.imageFolder = [1,2];

            setTimeout(function(){
                console.log($scope);
                $scope.imageFolder.push(6,7);
                console.log($scope); 
                console.log($scope.imageFolder)
            },1000);

             $scope.imageFolder.push(3,4,5);
             console.log($scope);
});

在前端我们看到:

[1,2,3,4,5] 希尔 希尔 希尔 希尔 更进一步

6 和 7 在 console.log 中可见,但没有触发前端更新(?)。稍后在这个项目中,像 url 和标题这样的图像信息应该通过 Ajax (sharepointplus) 加载到 DOM 中(但这需要一些时间约 5-7 秒) - 我的第一个版本没有显示任何图像 - 即使 ng-repeat由于与 setTimeOut 强制相同的问题而未触发...

我在这里可以做什么来让对象内容发生 Angular 刷新,又名:“空数组 --> 填充数组”?

感谢您的帮助和建议。

最佳答案

请这样做

        setTimeout(function(){
            console.log($scope);
            $scope.imageFolder.push(6,7);
            console.log($scope); 
            console.log($scope.imageFolder);
            $scope.$apply();
        },1000);

关于javascript - AngularJS - 当数据插入数组时,ng-repeat 和绑定(bind)未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53500359/

相关文章:

javascript - 带有 Angular 应用程序的 Paypal 返回 url

javascript - Nodejs nohup 死机无一异常(exception)

c# - 将值从 ASP.NET 传递到 Java 脚本再到 HTML

json - 使用 AngularJS 从 json 检索数据

angularjs - ui bootstrap 分页在 ng-if 标签内不起作用

javascript - 使用 Angular 保存到本地存储并从本地存储中检索

javascript window.open 不必要的顶部填充

javascript - 当鼠标悬停在下载按钮上时如何停止页脚与下载按钮一起移动

javascript - Node.JS ajax 替换现有 JSON 数据

javascript - React 不渲染 AJAX 数据