单击时 ng-repeat 中的一个按钮会改变颜色，而不是全部使用 Angularjs

Question

您好，我正在尝试让完成按钮在单击时变为绿色。我第一次尝试这样做时，它把所有的按钮都变成了绿色。

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

然后我尝试了这个，因为它似乎挑出了实际点击的按钮。但是一旦另一个按钮被点击，它就不再是绿色的，最近被点击的按钮现在是绿色的。

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

有没有办法让 ng-repeat 中的完成按钮在单击时变为绿色，并保持这种状态直到再次单击？谢谢！

Answer 1

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

单击时 ng-repeat 中的一个按钮会改变颜色，而不是全部使用 Angularjs

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

html

javascript

button

angularjs