Javascript 为mvc突出显示选定的div ng repeat

我有一个repeater div从json文件获取信息。当我选择一个div时，它从json文件中获取信息并填充它下面的div。尽管我尝试了很多次，但似乎无法获得要突出显示的正确选定div。无论我做什么，它都会突出显示第一张唱片，而不是其他唱片。我也不能取消选择它

我的代码如下：

.highlight {
            background-color: cyan;
            font-weight: bold;
        }

    <div ng-controller=ItemsController >
        <div style="overflow-y:scroll; height: 300px; max-height: 600px; margin: 16px;">
            <label class="labelQuestion" style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 12px;" id="lblWN" for="lblWorkplaceName"><b>Workplace / Function </b></label>
            <div class="panel-body">
                <div class="row" id="pap" ng-click="select(item)" ng-repeat="item in itemDetails" @*ng-repeat="papitem in pap"*@>
                    <div class="papdiv" style="width: 100%">
                        <div style="width: 20%; float: left;"><label class="labelQuestion" style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 12px;" id="lblWN" for="lblWorkplaceName"><b>Workplace Name: </b></label></div>
                        <div style="width: 80%; float: right;">
                            <label class="labelQuestion" style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 12px;" id="lblWorkplaceName">{{item.WorkplaceName}}</label>
                        </div>
                        <div style="width: 80%; float: right; color:black;">
                            <hr class="style-one">
                        </div>

                        <div style="width: 20%; float: left;"><label class="labelQuestion" style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 12px; padding-top:41px;" id="lblWN" for="lblFunctionName"><b>Function Name: </b></label></div>
                        <div style="width: 80%; float: right;">
                            <label class="labelQuestion" style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 12px;" id="lblWorkplaceName">{{item.FunctionName}} > {{item.BusinessUnit}} > {{item.ValueStream}} > {{item.WorkStream}} > {{item.Process}}</label>

                            <span class="tooltiptext">{{item.FunctionName}} > {{item.BusinessUnit}} > {{item.ValueStream}} > {{item.WorkStream}} > {{item.Process}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br />

---

我想能够突出显示的div点击它。有人能告诉我哪里出了问题吗？

前几天我努力这么做，终于想出了一个办法。我使用ng repeat track by$index和ng click=“addClass（$index）”。它将对象附加一个{selected:true}。然后我有一个ng类，它查看该值是否为真，并以其他方式添加该类，即没有类

因此，在我的.html文件中，如下所示：

<div ng-repeat="item in items track by $index">
   <div ng-click="addClass($index)" 
      ng-class="{selected:(items[$index].selected)?true:false}">
        {{item.name}}
   </div>
</div>

selected{
    color: red;
    background-color: blue;
}

---

非常感谢你！这帮了大忙！改变背景颜色，使其完美工作。

$scope.addClass = function(idx){
    //First I made all selected to false;
    for (var i = 0; i < $scope.unAssignedUnits.length; i++) {
       $scope.items[i].selected = false;
    }
    //Then i made the item that was clicked set to true;
    $scope.items[idx].selected = true;
}

selected{
    color: red;
    background-color: blue;
}