angular ng-repeat點擊切換樣式，淺談track by $index

前言

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>

JS

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];

會出現這樣的錯誤