ng-repeat當某些項目從後端解析爲html時

我想顯示一個數組並且能夠重新載入它。一些項目已經從後端提供給html（作爲SEO的一部分）。其餘的來自前端陣列。ng-repeat當某些項目從後端解析爲html時

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（從後端），但這似乎不是正確的做法。

有什麼建議嗎？

來源

2014-03-07 HP.

你能給'

你好瑪麗添加一個屬性！

'？ –

@DavinTryon是的，我可以修改後端HTML。你的建議是什麼？ –

正如你所說，從Dom刪除不是角度的方式，所以要避免這樣的事情。考慮你的應用程序的體系結構。你從後端打印出一個名稱，然後循環前端的名字 - 這真的有必要嗎？ –

您可以隱藏之後，從服務器

<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

來源

2014-03-07 09:21:14 Goodnickoff

一個簡單的方法加載內容靜態內容，將增加一個刷新的概念，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>

來源

2014-03-07 09:21:55

您需要選擇所有從後端的項目，並把它們放到名字數組：

在您的控制器，做：

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

這將選擇「Hello Mary」並刪除「Hello」並將「Mary」放入名稱數組中。

不知道這是否有幫助，但它做你要求做的。

來源

2014-03-07 09:23:53 frosty

ng-repeat當某些項目從後端解析爲html時

回答

相關問題