具有范围的数字的角度链接数组答案

【问题标题】：Angular link array of number with scope具有范围的数字的角度链接数组
【发布时间】：2016-01-07 13:31:17
【问题描述】：

我正在使用来自 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=truewhilecheckboxes[0]=false之后。

我可以使用如下更新函数强制更新向量：

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

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

谁能解释我如何将按钮的状态与他在复选框数组中的变量联系起来。

【问题讨论】：

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案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 中的任何值。所以我把 checkboxes 数组放在了作用域上并使用了它。

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

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

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

 }])

【讨论】：

【解决方案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;
     });
 }])

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

【讨论】：