調用初始化函數裏面NG-重複

我試圖調用內部ng-repeatng-init功能，它僅只是第一個元素：調用初始化函數裏面NG-重複

<li ng-repeat="comment in ad.comments|limitTo:quantity | orderBy : sortComment : true"> 
     <div id="starsDiv" ng-init="orderComment(comment.stars)"></div> 
      Comment: {{comment.text}} 
      <cite class="clearfix"> on {{comment.posted | date}}</cite> 
</li>

的orderComment內ng-repeat函數需要初始化的starDiv：

$scope.orderComment= function(numOfStars){ 
        var html = '<i class="fa fa-star-o" style="color:gold;"></i>'; 
        for(var i =0 ; i<numOfStars-1;i++) 
        { 
         html += '<i class="fa fa-star-o" style="color:gold;"></i>'; 
        } 
        document.getElementById("starsDiv").innerHTML = html; 
       };

通過comment.stars的值將HTML注入到starsDiv。例如，如果評論等於4將有4個HTML元素：

'<i class="fa fa-star-o" style="color:gold;"></i>'

裏面。

來源

2015-11-02 Itsik Mauyhas

究竟是什麼問題？適用於我：http://jsfiddle.net/330kedvq/ – pablochan

我在ng-init中注入HTML。 –

你不應該用'ng-init'來做到這一點。可以將html放入div中，也可以使用一個自定義指令，它將採用'comment.stars'並呈現它。 – pablochan

一般來說，Angular不鼓勵DOM自己進行更改，在這種情況下，這是不必要的。

一個簡單的解決方案可能是放入儘可能多的星星，並使用ng-show來顯示我們需要的量。假設有5星：

<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 0"></i> 
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 1"></i> 
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 2"></i> 
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 3"></i> 
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 4"></i>

如果你需要一個通用的解決方案，你可以隨時使用ng-repeat。你只需要一個函數，它會取一個數字並返回一個這樣大小的數組。你可以像這樣使用數組。

<i class="fa fa-star-o" style="color:gold;" ng-repeat="x in array(comment.stars)"></i>

更通用的解決方案是創建一個渲染這些恆星的自定義指令。我推薦閱讀關於自定義指令：https://docs.angularjs.org/guide/directive

來源

2015-11-02 16:39:10 pablochan

您所有的解決方案都很好，我認爲自定義指令是正確的方式。 –

調用初始化函數裏面NG-重複

回答

相關問題