從ng-repeat中改變元素的樣式

我想要識別表格中的按鈕，所以如果單擊它們中的一個，我可以改變樣式。這是我的工作表：從ng-repeat中改變元素的樣式

這裏是代碼：

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

我嘗試了好幾種方法來引用具體按鈕元素，使用這個，索引等。我還需要確定，對於每一行，只有一個被選中的按鈕。

我也嘗試通過{{$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; 
    };

指數返回undefined

來源

2017-12-18 Øystein Seel

可以更改基於使用納克級指令的用戶操作的CSS類。 details

代碼將會是這樣。在CSS類：.activeButton:{background-color", "green"}

在按鈕NG-點擊功能：buttonClicked[$index]=true;

在HTML按鈕輸入：

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

來源

2017-12-18 12:08:00

-1

唯一標識一個元素嵌套ng-repeat，您可以指定一個唯一的Id到它通過結合來自parent迴路的$index和來自child迴路：

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

現在，通過parent index和child index到事件，取元件並改變它的CSS：

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

下面是一個採樣數據的一個片段：

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>

來源

2017-12-18 12:22:44 Sajal

你可以嘗試類似下面的代碼，你也檢查你給定工作plunker的例子。

模板：

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

控制器：

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

來源

2017-12-18 12:29:46

我updataed我的問題根據您的回答，但我仍然有JS的 –

@Immanuel納克級=「{activeBtn麻煩：item.active}「就足夠了。不需要再次檢查，像'item.active == true' –

是的，你是對的@KannanThangadurai。我已更新。 :) –

從ng-repeat中改變元素的樣式

回答

相關問題