带ng-if条件的ng-repeat如何正确识别每个父li下的首个子元素

你当前代码中的$first是未过滤的items全局数组的遍历上下文属性，仅能识别整个items数组的第一个元素，所以无法匹配每个<li>下符合条件的首个item。

方案1：使用过滤器调整ng-repeat遍历范围（最简便） #

将原本写在ng-if中的匹配逻辑挪到ng-repeat的过滤规则中，让每个<li>下的ng-repeat仅遍历当前分类匹配的item，此时遍历上下文的$first就对应每个分类下的首个匹配item：

<li ng-repeat="category in categories" ng-if="category.id== '3'">              
    <!-- 如果需要严格匹配no的值和类型，可在过滤器后加true参数：filter: {no: category.no}: true -->
    <div ng-repeat="item in items | filter: {no: category.no}" 
         ng-style="{'margin-left': ($first ? '20px': '0px')}">
      ...
    </div>
</li>

方案2：控制器预关联数据（性能更优，适合数据量较大的场景） #

在控制器中提前为每个category关联匹配的item列表，避免在视图层做实时过滤，运行效率更高：

1. 控制器预处理逻辑示例：

$scope.categories.forEach(category => {
  if (category.id === '3') {
    category.relatedItems = $scope.items.filter(item => item.no === category.no)
  }
})

2. 视图层直接遍历预先生成的关联列表：

<li ng-repeat="category in categories" ng-if="category.id== '3'">              
    <div ng-repeat="item in category.relatedItems" 
         ng-style="{'margin-left': ($first ? '20px': '0px')}">
      ...
    </div>
</li>

内容的提问来源于stack exchange，提问作者user16333296