从ng-repeat中改变元素的样式

  • Z时代
  • 2024-01-10
  • 分类：问答

我想要识别表格中的按钮，所以如果单击它们中的一个，我可以改变样式。这是我的工作表：从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

回答：

可以更改基于使用纳克级指令的用户操作的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]'>}"

回答：

唯一标识一个元素嵌套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>

回答：

你可以尝试类似下面的代码，你也检查你给定工作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; 
};

以上是 从ng-repeat中改变元素的样式 的全部内容， 来源链接： utcz.com/qa/263173.html

回到顶部