从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中改变元素的样式

回答

相关问题