Angular link 范围内的数字数组

Question

我正在使用来自 UI Bootstrap 的按钮 (ui.bootstrap.buttons) 和我想 link 按钮的状态与数组中的变量。

这是我的控制器：

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=truewhilecheckboxes[0]=false.

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

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

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

谁能解释一下我如何 link 按钮的状态及其复选框数组中的变量。

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;
     });
 }])

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

Angular link 范围内的数字数组

Angular link array of number with scope

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap