Change style for element from ng-repeat

Question

I am trying to uniqeley identify buttons in a tablerow, so I can change the style if one of them is clicked. Here is the table i am working on:

And here is the code:

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

And js:

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

I have tried several approaches to reference the specific button-element, using this, index, etc. I also need to verfiy that for every row, there is only one of the buttons that are selected.

I also tried to pass {{$index}} to get a unique identifier for the row, but jquery doesn't support the syntax.

UPDATE based on answers:

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

index returns undefined

Answer 1

You can change the CSS class based on the user action by using ng-class directive. details

Code will be like that. In CSS class : .activeButton:{background-color", "green"}

In button ng-click function : buttonClicked[$index]=true;

In Html button input:

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

Answer 2

You can try something like the below code, also you check you given working plunker example.

Template:

<button id="tableButton" type="button" class="defaultBtn" ng-class="{activeBtn: item.active}" ng-repeat="item in items.type" ng-click="select(items.type, item)">{{item.value}}</button>

Controller:

$scope.select= function(items, index) {
    // You can remove this loop part if you don't want to reset your selection..
    angular.forEach(items, function(item){
      item.active=false;
    });
    index.active = true;
};

Answer 3

To uniquely identify an element in nested ng-repeat , you can assign a unique Id to it by combining the $index from the parent loop and from the child loop as :

id="tableButton_{{$parent.$index}}_{{$index}}"

Now, pass the parent index and the child index to the event, fetch the element and change its css:

ng-click="assigned($parent.$index, $index)"

Below is a snippet of a sample data:

 angular.module("app", []).controller("ctrl", function($scope) { $scope.items = ["Item A", "Item B"]; $scope.buttonTypes = ["Btn1", "Btn2", "Btn3", "Btn4"]; $scope.assigned = function(parentIndex, childIndex) { //Reset all buttons for one row var parentBtns = "#" + parentIndex + " :button"; $(parentBtns).css("background", "transparent"); //Change the selected button css var btn = "#tableButton_" + parentIndex + "_" + childIndex; $(btn).css("background", "green"); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body ng-app="app" ng-controller="ctrl"> <table class="table"> <thead> <tr> <th>Allergi navn</th> <th>Allergi verdi</th> </tr> </thead> <tbody> <tr ng-repeat="item in items"> <td> <b>{{item}}</b> </td> <td id="{{$index}}"> <button id="tableButton_{{$parent.$index}}_{{$index}}" type="button" class="btn-grey" ng-repeat="type in buttonTypes" ng-click="assigned($parent.$index, $index)"> <b>{{type}}</b> </button> <hr> </td> </tr> </tbody> </table> </body>