如何：在中继器中创建Angular/Bootstrap btn复选框

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>