javascript - 操作方法 : Creating Angular/Bootstrap btn-checkboxes in a repeater

Question

我正在尝试创建一个网格(带有 ng-repeat 的表格)，其中每行有 4 列按钮。理想情况下，这些按钮应该是复选框，例如 Angular/Bootstrap btn-checkbox，这样它们就有一个打开和关闭模式，我可以在 C# 代码中根据数据库派生的数据进行设置:将提供 Angular 页面。

我遇到的问题是，当单击“应用/保存”按钮时，我真的不知道如何检查controllers.js中那些btn-checkbox控件的状态，因此我可以保存值。

Answer 1

像这样怎么样？

我使用 eval 在 $scope.buttons 中创建作用域变量。

http://jsfiddle.net/tekmtn/dnfhnLex/3/

app = angular.module('myApp', ['ui.bootstrap']);
app.controller("myController", function($scope) {
    $scope.records = [1,2,3,4];
    $scope.buttonSets = [1,2,3,4];
  $scope.buttonsPerSet = ["Added", "Changed", "Closed"];

  $scope.buttons = {};

  $scope.toggleButton = function(recNum, setNum, btnText) {
    var field = "$scope.buttons." + "btnRec" + recNum + "_setNum_" + setNum + "_" + btnText;
    var value = eval(field);
    if(!value) {
        eval(field + " = 1;");
    } else {
        eval(field + " = 0;");
    }
  }

  $scope.isActive = function(recNum, setNum, btnText) {
    var field = "$scope.buttons." + "btnRec" + recNum + "_setNum_" + setNum + "_" + btnText;
    var value = eval(field);
    if(value == 1) {
        return true;
    } else {
        return false;
    }
  }

  $scope.save = function() {
    // send $scope.buttons through web service.
  }
});

<div ng-app="myApp">
    <div ng-controller="myController">
        <table class='table table-striped'>
           <thead>
            <tr>
          <th>Record</th>
          <th ng-repeat="setNum in buttonSets">
            Button Set {{setNum}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="recNum in records">
          <td>Record {{recNum}}</td>
          <td ng-repeat="setNum in buttonSets">
            <button ng-repeat="btnText in buttonsPerSet"
                    class='btn btn-default btn-xs' type='button'
                    uib-btn-checkbox
                    btn-checkbox-true="1"
                    btn-checkbox-false="0"
                    ng-click="toggleButton(recNum, setNum, btnText);"
                    ng-class="{'active':isActive(recNum, setNum, btnText)}">
              {{btnText}}
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    {{buttons}}
    <br /><br />
    <button type='button' class='btn btn-default'>Cancel</button>
    <button type='button' class='btn btn-default'>Apply</button>
    <button type='button' class='btn btn-default'>Save</button>
</div>