Angularjs 如何避免ng init在角度？_Angularjs

Angularjs 如何避免ng init在角度？

angularjs

Angularjs 如何避免ng init在角度？,angularjs,Angularjs,我想在ng repeat collection为空时显示消息，即： <div ng-init="filteredArray=(array|filter:{...})"> <h1 ng-if="!filteredArray.length">Empty array</h1> <table ng-if="filteredArray.length"> <tr ng-repeat="element in filtered

我想在ng repeat collection为空时显示消息，即：

<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>


空数组
{{element}}

问题是ng init不会监视源数组的修改。有没有关于如何正确操作的提示？

检查ng repeats$last以显示如下消息

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

</div>

<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
  }
})

由于已将

（数组|过滤器：{…}）

值存储到

filteredArray

，因此无法在模板中修改它

<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>

您应该在模板中重复

（数组|过滤器：{…}）

代码

<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>

空数组
{{element}}

您只需在

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>

在您的html中：

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

..

签入

这很聪明，但在我的情况下不起作用，因为我想用一些东西替换表，但ng repeat将位于嵌套的tr标记中，即结构不同。这可能会解决它。但对于这样一个微不足道的问题来说，它太复杂了。IMHO最好的方法是使用观察表达式的ng let。我试图避免在第三方指令中添加依赖项，并好奇是否还有其他方法。$last变量的使用在其他一些情况下非常有用，谢谢。如果您从指令控制器更新filteredArray，我在代码中没有发现任何错误…ng init在首次初始化后不会监视，这是事实。问题是数组是异步填充的（即使用REST HTTP请求），因此，当用户刷新页面时，在初始呈现期间和一段时间后，该页面将为空，但ng init ed filteredArray将保持为空。例如，像ng-let-from这样的东西可能会有所帮助，但我正在寻找一种内置指令的标准方法。那么为什么ng-if不起作用呢？我认为应该使用$scope.$apply（）；在HTTP请求完成后，AngularJS摘要周期被触发，DOM元素将根据filteredArray进行更新。您认为$scope.$apply（）会愚弄ng init重新计算吗？我不确定它会不会。它不会，但它会更新DOM元素，你可能会得到你自己的结果……是的，我一直在寻找类似的东西。逻辑并不明显，ng repeat表达式更难看，更难阅读，但它的工作原理与预期一致！见额外答案；）六羟甲基三聚氰胺六甲醚。。。如果我需要在JS代码中处理这个问题，那么使用自定义ng let会更方便，因为我在很多地方都需要它。而且，这种方法似乎在我的实际代码中不起作用，因为实际代码比这里的简单示例更复杂。但是变量可以在ng repeat中赋值这一事实是一个我不知道的很好的特性。谢谢。谢谢。我正试图避免重复同样的子表达式。代码重复是一个很好的提示，表明设计中存在错误。否则，这在技术上是正确的解决方案。