javascript - 问题 : ng-repeat with specific view should be displayed on click

Question

我有一个场景，其中有选项卡，当用户点击选项卡时，只有那个选项卡应该有星号，而不是每个选项卡

这是我的 html 代码:

<ul class="nav nav-tabs topics-div">
    <li class="li-div"><a><span>Topics</span> <span class="glyphicon glyphicon-play" aria-hidden="true"></span></a></li>
    <li ng-repeat="topics in oJdDetails.topics">
        <a style="cursor:pointer" ng-click="fngetQList(topics,$index)">
            <p>{{topics}}</p>
            <uib-rating ng-model="rate" ng-if="displayStars" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>
        </a>
    </li>
</ul>

我有一个 Controller 代码如下:

$scope.fngetQList = function(topics, index) {
        debugger;
        $scope.displayQList = true;
        $scope.displayStars = true;
        $scope.sTopics = topics;
        $scope.index = index;
        getCandidateInterviewListService.fnGetQList(topics).then(function(response) {
            $scope.aQuestionList = response;
            console.log($scope.aQuestionList);
        });
    };

这里的 topics 是一个类似 ["html","css","angular"]

的数组

我在这里面临的问题是，当我单击一个选项卡时，所有选项卡都得到了星星，而我只需要为单击的选项卡加星

如有任何帮助，我们将不胜感激。

Answer 1

所有选项卡都获得了星标，因为您在 ng-repeat 中使用了相同的范围变量 displayStars。同样，由于相同的范围变量 rate，所有 topics 的 rate 都相同。

而是为它们中的每一个使用一个数组，如下所示(请注意，您需要知道数组 oJdDetails.topics 的length。因此请确保您的初始化是正确的.),

HTML代码:

<ul class="nav nav-tabs topics-div">
    <li class="li-div"><a><span>Topics</span> <span class="glyphicon glyphicon-play" aria-hidden="true"></span></a></li>
    <!-- use `track by $index` here along with `ng-repeat` -->
    <li ng-repeat="topics in oJdDetails.topics track by $index">
        <a style="cursor:pointer" ng-click="fngetQList(topics, $index)">
            <p>{{topics}}</p>
            <uib-rating ng-model="rate[$index]" ng-if="displayStars[$index]" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>
        </a>
    </li>
</ul>

Controller 代码:

// you need to know the `length` of `oJdDetails.topics` 
$scope.rates = new Arryay(oJdDetails.topics.length).fill(0); // initialisation of array with `0` value
$scope.displayStars = new Arryay(oJdDetails.topics.length).fill(false);; // initialisation of array with `false` value
$scope.fngetQList = function (topics, index) {
    $scope.displayQList = true;
    $scope.displayStars[index] = true;
    $scope.sTopics = topics;
    $scope.index = index;
    getCandidateInterviewListService.fnGetQList(topics).then(function(response) {
        $scope.aQuestionList = response;
        console.log($scope.aQuestionList);
    });
};

希望这能解决问题。