在angularJS中使用ng-if条件停止循环答案

【问题标题】：Stop loop using ng-if condition in angularJS在angularJS中使用ng-if条件停止循环
【发布时间】：2015-09-18 12:41:21
【问题描述】：

我有这个代码。 $scope.counter = '1';

<div ng-repeat="cat in catadata">
   <div ng-if="cat.TopCategoryID = 2" >
      <div ng-if="counter = 1" >
         <div class="feedsDisplay" ng-init="counter = counter + 1">
            Creater Img:{{cat.CreatedBy_Profile.Picture.URI}}" 
         </div>
      </div>
   </div>
</div>

我想在counter = 2 时停止循环，我只想显示 1 个结果。

ng-init="counter = counter + 1
{{counter}}

显示11111 它应该显示12345

【问题讨论】：

真的不清楚你想做什么。您真的只想显示一个元素吗？为什么你用=而不是==做平等检查？
如果您只想显示索引为 1 的结果，只需这样做{{ catadata[0].CreatedBy_Profile.Picture.URI }}
1左右需要引号吗？
你能提供关于 jsfiddle 或 plunkr 的工作示例吗？并解释要你尝试做什么？不是不清楚

标签： javascript angularjs loops if-statement

【解决方案1】：

您正在与= 进行比较，而不是==

这样试试

ng-if="counter == 1"

counter 的值为 string 。在counter前添加+

这样试试

ng-init="counter = +counter + 1"

【讨论】：

ng-init="counter = counter + 1 {{counter}} 显示 11111 它应该显示 12345
@MuhammadRiaz，第一个 counter 值是 string 所以当你做 + 时，只需将 simbol 添加到字符串
喜欢这个counter = +counter + 1

【解决方案2】：

你不能有条件地停止ng-repeat。要仅打印一个结果，您可以使用

<div ng-repeat="cat in catadata | limitTo : 1">

或

<div>{{catadata[0]}}</div>

【讨论】：

我想限制在 ng-if 条件内
@MuhammadRiaz 所以添加filter 喜欢cat in catadata | filter: {TopCategoryID : 2}
@Riaz 使用 <div ng-if="cat.TopCategoryID == 2" >。但请记住 ng-repeat 将对数组的所有元素运行。 ng-if 只会阻止元素被创建。

【解决方案3】：

与其像这样滥用ng-repeat、ng-init和ng-if，不如在渲染之前尝试提取第一个匹配的cat，例如在控制器、指令或服务中：

for (var i = 0, maxI = catadata.length; i < maxI; ++i) {
    if (cat.TopCategoryID === 2) {
        $scope.firstMatchingCat = cat;
        break;
    }
}

然后在模板中：

<div class="feedsDisplay">
    Creater Img:{{firstMatchingCat.CreatedBy_Profile.Picture.URI}}" 
</div>

【讨论】：