angular ng-repeat点击切换样式，浅谈track by $index

风晓 2024-01-01 19:32:38  49603 赞同 0 反对 0

分类：资源

angular ng-repeat点击切换样式，ng-repeat点击切换class样式，巧用ng-repeat track by $index。

1.问题

一个ul包含多个li，li通过ng-repeat循环得到，其中一个li默认带有class样式，通过点击让这个class进行切换。

2.实现

ng-repeat默认可以获取到每个循环元素的索引，通过点击获取到当前元素的索引，结合ng-class判断，让此索引的元素添加样式

效果图

css

.classA {
    /* 我们需要切换的class样式 */
    background: #76becc; 
}

HTML

<div ng-controller="myCtrl">
    <ul>
        <li ng-repeat="item in arr track by $index" ng-class="{classA:$index == isActive}" ng-click="liIndex($index)">{{item}}</li>
    </ul>
</div>

var app = angular.module("myApp", []);
app.controller("myCtrl", ["$scope", function ($scope) {
    $scope.arr = [1, 2, 3, 4, 5];
    $scope.isActive = 0; //这里设置初始带有Class样式的li
    $scope.liIndex = function (index) {
        $scope.isActive = index; //通过li点击事件获取当前的li索引
    }
}])

3.简单谈谈 track by $index

ng-repeat在循环时，如果循环的对象有重复的值，就会报错，我们去掉上方代码中的track by $index，将数组改为

$scope.arr = [1, 1, 2, 3, 4, 4, 5];

会出现这样的错误

如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等，可点击“私信”按钮向作者进行反馈；如作者无回复可进行平台仲裁，我们会在第一时间进行处理！

评价 0 条

相关资源

点击“激活”按钮，激活界面一直出不来怎么办？ 2023-12-21 48702 浏览
点击“激活”按钮，激活界面一直出不来怎么办？
搜狗输入法没有办法切换到五笔输入，或者输入某些字符不对时 2023-12-25 50904 浏览
搜狗输入法没有办法切换到五笔输入，或者输入某些字符不对时
切换用户提示无法解析主机 2023-12-26 48804 浏览
切换用户提示无法解析主机
Ubuntu之桌面安装及启动级别切换 2024-01-05 49657 浏览
Ubuntu之桌面安装及启动级别切换
oracle 12.2 切换 2024-04-07 49878 浏览
Oracle 12.2 切换是数据库管理中一个重要的主题。在实际应用中，数据库管理员经常需要将业务流量从一个实例切换到另一个实例，或者在不同服务器之间切换数据库实例。使用Oracle 12.2 切换可以方便地实现这些任务，同时确保数据的可用性和一致性
【Linux】进程状态、进程优先级和进程切换 2024-01-06 50841 浏览
【Linux】进程状态、进程优先级和进程切换
【Linux】进程周边004之进程的调度与切换（领略Linux系统进程调度算法的神奇） 2024-01-06 51197 浏览
本篇文章与大家共同学习Linux下进程的调度与切换。
uos如何使用触控板手势切换工作区？ 2024-01-05 53094 浏览
uos如何使用触控板手势切换工作区？
Spring 动态切换、添加数据源实现以及源码浅析 2024-01-02 52301 浏览
公司项目需求，由于要兼容老系统的数据库结构，需要搭建一个可以动态切换、添加数据源的后端服务。参考了过去的项目，通过配置多个SqlSessionFactory 来实现多数据源，这么做的话，未免过于笨重，而且无法实现动态添加数据源这个需求。
为什么UOS自带视频播放器影院，点击播放器最小化后视频会停止播放？ 2024-01-02 49146 浏览
为提高用户体验，影院播放视频时最小化后视频会随之暂停播放，恢复窗口后视频会继续播放

angular ng-repeat点击切换样式，浅谈track by $index

相关资源

关注我们