CODEWITHSUNDEEP
javascripthtmlangularjsbutton
laurau08
laurau08

Reputation: 15

Having one button in ng-repeat change color when clicked, not all using Angularjs

Hi I'm trying to make my done button change green when clicked. The first time I attempted this, it changed all the buttons green.

index.html

    <tbody>
        <tr ng-repeat="plan in scheduler.plans | orderBy:'standardTime'">
            <td class="plan-time">{{plan.displayTime}}</td>
            <td class="plan-duration">{{plan.duration}} minutes</td>
            <td class="plan-task">{{plan.task}}</td>
            <td><button type="button" ng-class="{'btn-primary': !scheduler.clicked, 'btn-success': scheduler.clicked}" ng-click="scheduler.ping()" ng-click="scheduler.ping">Yes</button></td>
       </tr>
    </tbody>

app.js

function ping() {
    this.clicked = !this.clicked;
}

I then tried this out since it seemed to single out the button that was actually clicked. But once another button is clicked, it is no longer green and the most recent button that was clicked is now green.

index.html

    <tbody>
        <tr ng-repeat="plan in scheduler.plans | orderBy:'standardTime'">
            <td class="plan-time">{{plan.displayTime}}</td>
            <td class="plan-duration">{{plan.duration}} minutes</td>
            <td class="plan-task">{{plan.task}}</td>
            <td><button type="button" ng-class="{true:'btn-success'}[scheduler.activeBtn == $index]" ng-click="scheduler.selectBtn($index)">Yes</button></td>
        </tr>
    </tbody>

app.js

function selectBtn(index) {
    var that = this;
    that.activeBtn = index;
}

Is there a way to make the done buttons within the ng-repeat change green when clicked, and stay that way until it is clicked on again? Thanks!

Upvotes: 1

Views: 1121

Answers (1)

simon
simon

Reputation: 1485

<tbody>
        <tr ng-repeat="plan in scheduler.plans | orderBy:'standardTime'">
            <td class="plan-time">{{plan.displayTime}}</td>
            <td class="plan-duration">{{plan.duration}} minutes</td>
            <td class="plan-task">{{plan.task}}</td>
            <td><button type="button" ng-class="{'btn-primary': !plan.clicked, 'btn-success': plan.clicked}" ng-click="plan.clicked = !plan.clicked">Yes</button></td>
       </tr>
    </tbody>

Upvotes: 3

Related Questions