操作方法：在中继器中创建 Angular/Bootstrap btn-checkboxes

Question

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

我遇到的问题是，当 Apply/Save 按钮被点击时，我真的不知道如何检查 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>

操作方法：在中继器中创建 Angular/Bootstrap btn-checkboxes

How-To: Creating Angular/Bootstrap btn-checkboxes in a repeater

javascript

jquery

twitter-bootstrap

angularjs

angular-ui-bootstrap