javascript - 从 ng-repeat 更改元素的样式

Question

我正在尝试 uniqeley 识别表格行中的按钮，这样我可以在单击其中一个按钮时更改样式。这是我正在处理的表格:

代码如下:

<table class="table">
    <thead>
        <tr>
            <th>Allergi navn</th>
            <th>Allergi verdi</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="items in $ctrl.allergen">
            <td>
                <b>
                    {{items.Allergennavn}}
                </b>
            </td>
            <td id="{{$index}}">
                <button 
                    id="tableButton" 
                    type="button" 
                    class="btn-grey"  
                    ng-repeat="item in $ctrl.allergenVerdiType"
                    ng-click="$ctrl.allergiAssigned($index, items, item)"
                >
                <b>
                    {{item.Allergenverdi}}
                </b>
                </button>
                <hr>
            </td>
            </tr>
        </tbody>
    </table>

和js:

ctrl.allergiAssigned = function($index, itemAllergen, itemAllergenType){
        var index = $('button').index(this);
        $(index, '#tableButton').css("background-color", "green");           
    }

我已经尝试了几种方法来引用特定的按钮元素，使用 this、index 等。我还需要验证每一行中只有一个按钮被选中。

我还尝试通过 {{$index}} 来获取该行的唯一标识符，但 jquery 不支持该语法。

根据答案更新:

<table class="table">
    <thead>
        <tr>
            <th>Allergi navn</th>
            <th>Allergi verdi</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="items in $ctrl.allergen">
              <td>
                  <b>
                      {{items.Allergennavn}}
                  </b>
              </td>
              <td id="{{$index}}">
                  <button id="tableButton" type="button" 
                      class="btn-grey" ng-class="{activeBtn: item.active == true}"
                      ng-repeat="item in $ctrl.allergenVerdiType"
                      ng-click="$ctrl.select(items.type, item)">
                  {{item.AllergenverditypeKode}}</button>
                  <hr>
              </td>
            </tr>
          </tbody>
    </table>

  ctrl.select = function(items, index) {
        angular.forEach(items, function(item){
          item.active=false;
        });
        index.active = true;
    };

索引返回未定义

Answer 1

您可以使用 ng-class 指令根据用户操作更改 CSS 类。 details

代码就是这样。在 CSS 类中:.activeButton:{background-color", "green"}

在按钮 ng-click 函数中:buttonClicked[$index]=true;

在 Html 按钮中输入:

.....  ng-class="{'btn-grey':'btn-grey',                      
        'activeButton':<add your condition like 'buttonClicked[$index]'>}"