CODEWITHSUNDEEP
javascripthtmlangularjs
Shikha thakur
Shikha thakur

Reputation: 1289

Issue: ng-repeat with specific view should be displayed on click

I have a scenario where there are tabs and when a user clicks on the tabs then only that tab should have stars not every tab

Here is my html code:

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

I have a controler code as below:

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

Here topics is an array like ["html","css","angular"]

The problem im facing here is when i click one tab i am getting stars for all the tabs where i need stars for only the clicked tab

Any help would be appreciated.

Upvotes: 1

Views: 42

Answers (1)

Chinni
Chinni

Reputation: 1290

All the tabs are getting stars because you have used the same scope variable displayStars in ng-repeat. Similarly, you will have the rate of all the topics to be the same because of the same scope variable rate.

Instead use an array for each of them as follows (Note that you need to know the length of the array oJdDetails.topics. So make sure your initialisations are correct.),

HTML code:

<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 code:

// 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);
    });
};

Hope this solves the issue.

Upvotes: 2

Related Questions