从 ng-repeat 更改元素的样式答案

【问题标题】：Change style for element from ng-repeat从 ng-repeat 更改元素的样式
【发布时间】：2017-12-18 12:03:06
【问题描述】：

我正在尝试唯一标识表格中的按钮，因此如果单击其中一个按钮，我可以更改样式。这是我正在处理的表：

这里是代码：

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

索引返回未定义

【问题讨论】：

标签： javascript jquery css angularjs

【解决方案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]'>}"

【讨论】：

【解决方案2】：

要唯一标识嵌套ng-repeat 中的元素，您可以通过将parent 循环中的$index 和child 循环中的Id 组合为：

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

现在，将parent index 和child index 传递给事件，获取元素并更改其css：

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

以下是样本数据的 sn-p：

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>

【讨论】：

【解决方案3】：

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

【讨论】：

我根据您的回答更新了我的问题，但我仍然遇到 js 问题
@Immanuel ng-class="{activeBtn: item.active}" 就足够了。不需要像'item.active == true'那样再次检查
是的，你是对的@KannanThangadurai。我已经更新了。 :)
@ØysteinSeel，您需要将 $ctrl.select(items.type, item) 更改为 $ctrl.select($ctrl.allergenVerdiType, item) 直到将第一个参数作为我的示例变量传递为止..