单击ng-repeat中的一个按钮可以改变颜色，而不是全部使用Angularjs [英] Having one button in ng-repeat change color when clicked, not all using Angularjs

问题描述

你好，我试图让我的完成按钮变成绿色时单击。第一次尝试时，它将所有按钮变成绿色。

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}}分钟< / td> 
< td class =plan-task> {{plan.task}}< / td> 
< td>< button type =buttonng-class ={'btn-primary'：！scheduler.clicked，'btn-success'：scheduler.clicked}ng-click =scheduler .ping（）ng-click =scheduler.ping>是< / button>< / td> 
< / tr> 
< / tbody> 
  

app.js

 函数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}}分钟< / td> 
< td class =plan-task> {{plan.task}}< / td> 
< td>< button type =buttonng-class ={true：'btn-success'} [scheduler.activeBtn == $ index]ng-click =scheduler.selectBtn（$索引）>是< /按钮>< / TD> 
< / tr> 
< / tbody> 
  

app.js

 函数selectBtn（index）{
 var that = this; 
 that.activeBtn = index; 
} 
  

有没有办法让ng-repeat内的done按钮变成绿色点击时，并保持这种方式，直到再次点击？感谢！

解决方案

 < tbody> 
< tr ng-repeat =plan in scheduler.plans | orderBy：'standardTime'> 
< td class =plan-time> {{plan.displayTime}}< / td> 
< td class =plan-duration> {{plan.duration}}分钟< / td> 
< td class =plan-task> {{plan.task}}< / td> 
< td>< button type =buttonng-class ={'btn-primary'：！plan.clicked，'btn-success'：plan.clicked}ng-click =plan .clicked =！plan.clicked>是< / td>< /按钮>< / td> 
< / tr> 
< / tbody> 
  

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!

解决方案

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！