AngularJS中使用ng-repeat的index问题

 更新时间:2023年11月07日 17:05:50   作者:whereismatrix  
这篇文章主要介绍了AngularJS中使用ng-repeat的index问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

AngularJS使用ng-repeat的index

AngularJS中的ng-repeat中,隐含的index,可以使用$index来访问,也可以自己指定index对应的变量名。

使用隐含的index变量

隐含的index变量名是index,可以使用$index来访问。

// 定义module和controller
var site = angular.module('application.site', []);
site.controller('MainController', ['$scope', '$http', function ($scope, $http) {
    $scope.users = [
        {name:"xialei",posts:["post一","post二","post三"]},
        {name:"zhangsan",posts:["post四","post五"]}
    ];
}]);

下面在html页面内使用controller和定义的collection对象。

<div ng-controller="MainController">
    <dl ng-repeat="user in users">
       <dt ng-init="p_index=$index">Name:{{ user.name }}</dt>

    </dl>
</div>

这里使用了$index,这是AngularJS提供的隐含的collection对象的index变量量。

指定index变量名

在ng-repeat中可以自己指定index的变量名称,并在随后使用。

比如下面代码中,定义了times的index变量名称timeIndex (为tr 元素), 为days的遍历操作,定义了dayIndex的索引变量。

<tr data-ng-repeat="(timeIndex, time) in times">
                <td style="text-align: center; width: 12.5%;" data-ng-style="doGetTimeColumnStyle($index)">{{time}}</td>
                <td   data-ng-repeat="(dayIndex, day) in days" 
                     data-ng-click="selectDatetimeSlot(dayIndex, day, timeIndex, time)">
                    <button class="popupWindow" 
                        data-ng-if="datetimeSlots[dayIndex][timeIndex].status && datetimeSlots[dayIndex][timeIndex].status != 'AVAILABLE' && datetimeSlots[dayIndex][timeIndex].status != 'EXPIRED' &&
                            datetimeSlots[dayIndex][timeIndex].mode != 'ONE_V_MANY'" 
                        data-ng-class="datetimeSlots[dayIndex][timeIndex].displayStatus | lowercase" 
                        data-placement="{{doGetTimeColumnPopOverPlacement(dayIndex, timeIndex)}}" data-animation="am-flip-x" 
                        data-trigger="focus" data-bs-popover
                        data-template="partials/timeSlotPopover.html">
                        {{datetimeSlots[dayIndex][timeIndex].displayStatus}} {{datetimeSlots[dayIndex][timeIndex].stdName}}
                    </button>

ps:

$index是angular 内针对ng-repeat提供的隐含index变量名称,如果在ng-repeat嵌套使用时,index名称会发生冲突及覆盖。这是也应该使用自定义的变量名。

下面例子中父级的index使用ng-init,定义了p_index来指定为parent index。

 <div ng-controller="MainController">
    <dl ng-repeat="user in users">
       <dt ng-init="p_index=$index">Name:{{ user.name }}</dt>
        <dd ng-repeat="p in user.posts">Parent index:{{ p_index }} - {{ p }}
       self Index:{{ $index }}
        </dd>
    </dl>
</div>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 关于 angularJS的一些用法

    关于 angularJS的一些用法

    这篇文章主要介绍了关于 angularJS的一些用法的相关资料,需要的朋友可以参考下
    2017-11-11
  • angularJs的ng-class切换class

    angularJs的ng-class切换class

    这篇文章主要介绍了angularJs的ng-class切换class,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Angular1.x复杂指令实例详解

    Angular1.x复杂指令实例详解

    这篇文章主要介绍了Angular1.x复杂指令,结合实例形式分析了指令的使用、模板指令、指令的作用域等概念与具体使用技巧,需要的朋友可以参考下
    2017-03-03
  • angular4 获取wifi列表中文显示乱码问题的解决

    angular4 获取wifi列表中文显示乱码问题的解决

    这篇文章主要介绍了angular4 获取wifi列表中文显示乱码问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • angular或者js怎么确定选中ul中的哪几个li

    angular或者js怎么确定选中ul中的哪几个li

    下面小编就为大家带来一篇angular或者js怎么确定选中ul中的哪几个li。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • AngularJS中的过滤器filter用法完全解析

    AngularJS中的过滤器filter用法完全解析

    这篇文章主要介绍了AngularJS中的过滤器filter用法,包括Angular中一些常用的自带的过滤器的列举以及自定义filter的方法,需要的朋友可以参考下
    2016-04-04
  • 解决angular2 获取到的数据无法实时更新的问题

    解决angular2 获取到的数据无法实时更新的问题

    今天小编就为大家分享一篇解决angular2 获取到的数据无法实时更新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Angular2中如何使用ngx-translate进行国际化

    Angular2中如何使用ngx-translate进行国际化

    本篇文章主要介绍了Angular2中使用ngx-translate进行国际化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • angularjs点击图片放大实现上传图片预览

    angularjs点击图片放大实现上传图片预览

    这篇文章主要为大家详细介绍了angularjs点击图片放大实现上传图片预览的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 关于AngularJS中几种Providers的区别总结

    关于AngularJS中几种Providers的区别总结

    这篇文章主要给大家介绍了关于AngularJS中几种Providers的区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用AngularJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-05-05

最新评论