关于AngularJs的ng-repeat

最新推荐文章于 2020-08-06 16:19:04 发布

原创最新推荐文章于 2020-08-06 16:19:04 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

AngularJs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的Tab切换示例，通过ng-repeat指令生成标签，并利用ng-show控制显示的内容。示例中定义了pages数组，每个元素包含标题、页面路径等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ng-repeat生成重复标签

<!-- 标签内容 -->
<div class="tab">
    <ul>
        <li class="" ng-class="{'active':currentPage==page}" 
        ng-repeat="page in pages">
            <a ng-clock="showPage(page)">
                <span ng-bind="page.title"></span>
            </a>
        </li>
    </ul>
</div>
<!-- 标签点击面板 -->
<div>
    <div ng-class="{'active':currentPage==page}" class="tab-pane"
    ng-show="currentPage==page" ng-repeat="page in pages"
    data-ng-include="page.templateUrl">
    </div>
</div>
<!-- js部分 -->

<script type="text/javascript">
var page=[
{title:'标签一',templatUrl:'/页面路径',
    controller:'控制器名称',
    deps:['/页面相关js文件的路径']
    }
]

//记录点击的是第几页
$scope.showPage=function(page){  
    $scope.currentPage=page;
};

//默认第一页
$scope.showPage(pages[0]);
</script>