Question

我一直试图让下面的代码工作，但还没有找到一个好的解决方案。我已经通过jQuery成功完成了这种类型的功能，但我的新要求是弄清楚如何以有角度的方式做到这一点。

我有一个通过ng-repeat构建的表，每行包含一组是/否按钮，以便＆＃34;批准＆＃34;或＆＃34;拒绝＆＃34;每行中可见的数据。当某行被批准或拒绝时，该行的颜色将变为绿色或红色。

目前我的所有行都在更改颜色，而不是仅更改单击是/否的行。我已尝试使用索引执行某些操作并通过id（本例中的术语）和无数其他内容发送，但我不确定在控制器内部应该做什么以及如何添加特定于每一行的类名。非常感谢帮助。

HTML：

<tr ng-repeat="tableData in maximumOfferData" ng-class="{0:'test-none', 1:'test-yes',2:'test-no'}[classstatusmaximum]">
                  <td>{{tableData.term}}</td>
                  <td>{{tableData.offer}}</td>
                  <td>{{tableData.payment}}</td>
                  <td>{{tableData.coverage}}</td>
                  <td>
                    <div class="btn-group pull-right">
                      <label  data-ng-model="testyes"
                              data-btn-radio="'Left'"
                              class="btn btn-default ok ng-pristine ng-untouched ng-valid"
                              ng-click="changeMaximumStatusYes(tableData.term)">
                        YES
                      </label>
                      <label  data-ng-model="testyes"
                              data-btn-radio="'Middle'"
                              class="btn btn-default nok ng-pristine ng-untouched ng-valid"
                              ng-click="changeMaximumStatusNo(tableData.term)">
                        NO
                      </label>
                    </div>
                  </td>
                </tr>

Controller.js：

 $scope.maximumOfferData= [
      {'term':'7', 'offer':'11500', 'payment':'11.57', 'coverage':'18' },
      {'term':'8', 'offer':'12500', 'payment':'16.88', 'coverage':'24' },
      {'term':'9', 'offer':'9500', 'payment':'18.72', 'coverage':'12' }
    ];

    $scope.classstatusmaximum = "0";

    $scope.changeMaximumStatusYes = function(offerid){
      console.log(offerid);
      if ($scope.classstatusmaximum !== "1")
        $scope.classstatusmaximum = "1";
    };

    $scope.changeMaximumStatusNo = function(offerid){
      console.log(offerid);
      $scope.classstatusmaximum = offerid;
      if ($scope.classstatusmaximum !== "2")
        $scope.classstatusmaximum = "2";
    };

见上文Plunker尝试在这里： http://plnkr.co/edit/3OjtzSUWdWCYTpXqxtOd?p=preview

Answer 1

在html中更改此行：

<tr ng-repeat="tableData in maximumOfferData" 
    ng-class="{0:'test-none', 1:'test-yes',2:'test-no'}[tableData.status]">

和这个

<label  data-ng-model="testyes"
                          data-btn-radio="'Left'"
                          class="btn btn-default ok ng-pristine ng-untouched ng-valid"
                          ng-click="changeMaximumStatusYes(tableData)">
                    YES
                  </label>
                  <label  data-ng-model="testyes"
                          data-btn-radio="'Middle'"
                          class="btn btn-default nok ng-pristine ng-untouched ng-valid"
                          ng-click="changeMaximumStatusNo(tableData)">
                    NO

在你的控制器中：

$scope.maximumOfferData= [
  {'term':'7', 'offer':'11500', 'payment':'11.57', 'coverage':'18','status':'0' },
  {'term':'8', 'offer':'12500', 'payment':'16.88', 'coverage':'24','status':'0' },
  {'term':'9', 'offer':'9500', 'payment':'18.72', 'coverage':'12','status':'0' }
];

$scope.changeMaximumStatusYes = function(data){
  data.status = "1";
};

$scope.changeMaximumStatusNo = function(data){
  data.status = "2";
};

通过这种方式，您可以在每一行上设置不同的状态，而不是在单个var上设置状态

如何根据标签设置表格行颜色＆＃34;是/否＆＃34;每行点击次数

1 个答案: