Question

我有一个转发器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 />

JS档案：

PapWidget.factory('itemsFactory', ['$http', function ($http) {
var itemsFactory = {
    itemDetails: function () {
        return $http(
            {
                url: "mockItems.json",
                method: "GET",
            })
            .then(function (response) {
                return response.data;
            });
    }
};
return itemsFactory;

}]);

PapWidget.controller('ItemsController', ['$scope', 'itemsFactory', '$log', '$q', '$http', '$filter',
 function ($scope, itemsFactory, $log, $q, $http, $filter) {

    var promise = itemsFactory.itemDetails();

    promise.then(function (data) {
        $scope.itemDetails = data;
        console.log(data);
    });

    var classHighlight = 'highlight';
    var $thumbs = $('.row').click(function (e) {
        e.preventDefault();
        $thumbs.removeClass(classHighlight);
        $(this).addClass(classHighlight);
    });

    $scope.select = function (item)
    {
        $scope.selected = item;
        alert("Selected: " + $scope.selected);
    }
    $scope.selected = {};

我希望能够在点击它时突出显示div。谁能告诉我哪里出错？

Answer 1

前几天我努力做到这一点，并想出了一个黑客。我使用ng-repeat track by $ index和ng-click =＆＃34; addClass（$ index）＆＃34;。其中对象附加{selected：true}。然后我有一个ng-class，看看是否该值是真的并且另外添加了类，没有类。

所以在我的.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>

在我的controller.js看起来像这样：

$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;
}

然后我的styles.scss看起来像这样：

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

突出显示mvc的选定div-repeat

1 个答案: