带范围的数字的角度链接数组

Angular link array of number with scope

本文关键字：链接 数组 数字 范围      更新时间：2023-09-26

我正在使用ui引导和我想将按钮的状态与数组中的一个变量链接起来。

这是我的控制器：

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

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

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

您可以尝试：

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模型中的任何值。因此，我将复选框数组放在作用域上，并使用它。

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

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

如果这样做会更好：

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

这避免了代码重复，也使其更易于维护！

相关文章：