Question

我正在使用来自UI Bootstrap的按钮（ui.bootstrap.buttons）我想将按钮的状态与数组中的变量链接起来。

这是我的控制者：

angular.module('test')
.controller('btest',
    ['$scope',
     '$log',
     function ($scope, $log) {
         $log.info("controller Loaded!");
         var checkboxes = [false,false];

         $scope.pos1 = checkboxes[0];
         $scope.pos2 = checkboxes[1];

     }])

这是HTML的一部分：

<div class="row">
<button type="button" class="col-md-1 btn btn-primary" ng-model="pos1" uib-btn-checkbox>B1</button>
<button type="button" class="col-md-1 btn btn-primary" ng-model="pos2" uib-btn-checkbox>B2</button>
</div>

通过单击按钮，它不会更改复选框数组中的值，只会更改其变量的值。

例如：点击"B1" pos1=true后checkboxes[0]=false。

我可以使用像这样的更新函数强制更新向量：

$scope.update = function(index) {
             checkboxes[index] = !checkboxes[index];
}

但我认为这不是正确的方法。

有人可以解释我如何将按钮状态与其复选框数组中的变量相关联。

Answer 1

你可以尝试：

angular.module('test')
.controller('btest',
  ['$scope',
   '$log',
   function ($scope, $log) {
     $log.info("controller Loaded!");
     $scope.checkboxes = [false,false];

  }])


<div class="row">
  <button type="button" class="col-md-1 btn btn-primary" ng-model="checkboxes[0]" uib-btn-checkbox>B1</button>
  <button type="button" class="col-md-1 btn btn-primary" ng-model="checkboxes[1]" uib-btn-checkbox>B2</button>
</div>

uib-btn-checkbox将始终设置ng-model中的任何值。所以我把复选框数组放在了作用域上并改为使用它。

您似乎感到困惑的是，您希望pos1和pos2保留对复选框数组值的引用。 JavaScript（以及大多数其他语言）不能像那样工作。所以你的代码相当于：

angular.module('test')
.controller('btest',
  ['$scope',
   '$log',
   function ($scope, $log) {
     $log.info("controller Loaded!");

     $scope.pos1 = false;
     $scope.pos2 = false;

 }])

Answer 2

如果这样做会更好：

<div class="row">
  <button type="button" class="col-md-1 btn btn-primary" ng-repeat="checkbox in checkboxes" ng-click="checkbox.isChecked = !checkbox.isChecked" ng-model="checkbox.isChecked" uib-btn-checkbox>{{checkbox.text}}</button>
</div>

在你的控制器中：

.controller('btest',
  ['$scope',
   '$log',
   function ($scope, $log) {
     $scope.checkboxes = [
       {
          text: "B1"
       },
       {
          text: "B2"
       }
     ];
     $scope.checkboxes.forEach(function(checkbox) {
       checkbox.isChecked = false;
     });
 }])

这可以避免重复代码，也可以更容易维护！

具有范围

2 个答案: