如何避免角度ng-init？

我想顯示消息時NG-重複集合爲空，即：如何避免角度ng-init？

<div ng-init="filteredArray=(array|filter:{...})"> 
    <h1 ng-if="!filteredArray.length">Empty array</h1> 
    <table ng-if="filteredArray.length"> 
     <tr ng-repeat="element in filteredArray"> 
      <td>{{element}}</td> 
     </tr> 
    </table> 
</div>

的問題是，NG-init將不能對源陣列的修改觀看。任何提示如何正確地做到這一點？

來源

2016-07-08 Atanas Palavrov

如果從指令更新filteredArray我不覺得在你的代碼的任何錯誤controller ... ng-init在第一次初始化後不會監視，這是事實。 – Ajay

問題是數組是異步填充的（即使用REST HTTP請求），所以當用戶刷新頁面時，它在初始渲染期間是空的，並且在一段時間後數據將會到達，但ng-init-ed filteredArray會保持空白。即像ng-let從http://stackoverflow.com/questions/17355827/how-to-write-directive-ng-let-that-binds-an-expression-to-a-name可以幫助，但我期待用於構建指令的標準方式。 –

那麼爲什麼ng-if不工作？我認爲你應該使用$ scope。$ apply（）; HTTP請求完成後，AngularJS摘要循環被觸發，並且DOM元素將根據filteredArray進行更新。 – Ajay

您可以只創建在ng-repeat過濾的變量，並使用一個：

<div> 
    <h1 ng-if="!filteredArray.length">Empty array</h1> 
    <table ng-if="filteredArray.length"> 
     <!-- here angular assigns the filtered array to the 'filteredArray' variable, 
     which then can be used --> 
     <tr ng-repeat="element in filteredArray=(array|filter:{...})"> 
      <td>{{element}}</td> 
     </tr> 
    </table> 
</div>

參見this jsfiddle

編輯

如果你不不喜歡醜陋的表情，喲ü也可以做這樣的事情：

function myController ($scope, $filter) { 
    $scope.$watch("theFilter", function (val) { 
     $scope.filteredArray = $filter("filter")($scope.array, val); 
    }); 
}

而在你的HTML：

<tr ng-repeat="element in filteredArray"> 
    .. 
</tr>

入住this jsfiddle

來源

2016-07-08 10:48:39 devqon

是的，我正在尋找類似的東西。邏輯不明顯，ng-repeat表達式更醜陋，難以閱讀，但它按預期工作！ –

查看更多的答案;） – devqon

嗯......如果我需要在JS代碼中處理，然後使用自定義ng-let會更方便，因爲我需要在很多地方。似乎這種方法在我的真實代碼中不起作用，它比這裏的簡單例子更加複雜。但是，變量可以在ng-repeat中分配的事實是一個我不知道的好功能。欣賞它。謝謝。 –

檢查最近$顯示你的消息像下面

<div ng-repeat="n in data track by $index"> 
    <h1 ng-if="$last">Empty array</h1> 

</div>

在你的情況，你可以在表級別有一個變量，然後NG-重複它設置爲$最後，當它會是真實的你消息將顯示如下圖所示

<body ng-app="app" ng-controller="ctrl"> 
    <div ng-init='counter=false'> 
     <h1 ng-if='counter'>Empty array</h1> 
     <table ng-if="myData.length"> 
     <tbody> 
      <tr ng-repeat="element in myData track by $index" ng-init="counter=$last"> 
      <td>{{element}} 
      <ng-if ng-init='sync($last)'/> 
      </td> 
      </tr> 
     </tbody> 
     </table> 

    </div> 
    </body>

你的控制器看起來應該像下面

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

app.controller('ctrl',function($scope){ 

    $scope.myData=['a','b','c'] 
    $scope.sync=function(val) 
    { 
    alert(val) 
    $scope.counter=val 
    } 
})

來源

2016-07-08 10:38:19

這是聰明的，但不會在我的情況下工作，因爲我想用某些東西替換表，但ng重複將在嵌套tr標記，即結構不相同。 –

這可能會解決它。但對於這樣一個微不足道的問題來說太複雜了。恕我直言，最好的方法是使用ng-let來監視表達式。我試圖避免增加對第三方指令的依賴，並且好奇是否有另一種方式。 $ last變量的使用在其他一些情況下可能會非常有用，謝謝。 –

由於您已將(array|filter:{...})的值存儲到filteredArray中，您無法在模板中對其進行修改。

您應該重複模板中的(array|filter:{...})代碼。

<h1 ng-if="!(array|filter:{...}).length">Empty array</h1> 
<table ng-if="(array|filter:{...}).length"> 
    <tr ng-repeat="element in (array|filter:{...})"> 
     <td>{{element}}</td> 
    </tr> 
</table>

來源

2016-07-08 10:47:29 amit

我試圖避免重複相同的子表達式。代碼重複是設計中出現錯誤的一個很好的暗示。否則，這是技術上正確的解決方案。 –

如何避免角度ng-init？

回答

相關問題