Question

我想显示数组并能够重新加载它。有些项目是从html中提供的后端（作为SEO的一部分）。其余的来自前端阵列。

HTML

<div ng-controller="MainCtrl">
  <p>Hello Mary!</p>
  <p ng-repeat="name in names">Hello {{ name }}!</p>
  <button ng-click="loadNew()">Load New</button>
</div>

的Javascript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.names = ['Peter', 'Jack'];

  $scope.loadNew = function() {
    $scope.names = ['Joe', 'Jennifer'];
  }
});

http://plnkr.co/edit/ANdV8G9tLahxtaX6vvkK?p=preview

正如您所看到的，<p>Hello Mary!</p>已经存在于后端。但它与ng-repeat循环中的项目基本相同。

我想点击加载新并重新加载MainCtrl中的所有内容，包括后端的元素。

怎么做？

因为现在ng-repeat不了解不在其循环内的元素。我正在考虑使用jQuery手动删除DOM（从后端），但这似乎不是正确的事情。

有什么建议吗？

Answer 1

您可以在从服务器加载内容后隐藏静态内容

<p ng-if="showStatic">Hello Mary!</p>

和

app.controller('MainCtrl', function($scope) {
  $scope.names = ['Peter', 'Jack'];
  $scope.showStatic = true;
  $scope.loadNew = function() {
    $scope.names = ['Joe', 'Jennifer'];
    $scope.showStatic = false;
  }
});

http://plnkr.co/edit/fuhJSvAGRPl5Jasusref?p=preview

Answer 2

一种简单的方法是添加刷新的概念，并ng-if输出所有服务器提供的值。这仅在您可以向服务器提供的标记添加属性时才有效：

这是updated plunker。

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.names = ['Peter', 'Jack'];

  $scope.loadNew = function() {       
    $scope.names = ['Joe', 'Jennifer'];
    $scope.refreshed = true;
  }
});

HTML：

<div ng-controller="MainCtrl">
  <p ng-if="!refreshed">Hello Mary!</p>
  <p ng-repeat="name in names">Hello {{ name }}!</p>
  <button ng-click="loadNew()">Load New</button>
</div>

Answer 3

您需要从后端选择所有项目并将它们放入名称数组中：

在您的控制器中，执行：

angular.element('[ng-controller=MainCtrl] p:eq(0)').each(function(){
    $scope.push(angular.element(this).text().replace('Hello ', ''));
});

这将选择“Hello Mary”并删除“Hello”并将“Mary”放入names数组中。

不确定这是否有帮助，但它确实按照您的要求行事。

当一些项从后端解析为html时，重复重复

3 个答案: