AngularJS 基于关闭复选框选择显示数组

Question

我有 4 个复选框，根据选中的 one/pair，我希望在页面上显示特定的数组。我对 angularjs 比较陌生，所以我不确定如何让它工作。那么我该如何 a) 检查通过 angular 选择了哪个复选框，b) 打印出特定的数组，以及 c) 如果选择了 "Do Nothing"，将出现一条消息而不是数组。内容应该是动态的，所以如果我选择不同的复选框，内容也会改变。 http://codepen.io/MarkBond/pen/gpJWKe?editors=101 "Simple Form Object" 只是为了显示当前布尔值不是应该出现的名称数组。

HTML

<html ng-app="myApp">
 .....
 <body ng-controller="FormController">
 <form>
  <div class="checkbox">
    <label>
      <input type="checkbox" name="displayOption" ng-model="formData.displayOption.fiftyMill"/>50 million
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" name="displayOption" ng-model="formData.displayOption.hundredMill" />100 million
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" name="displayOption" ng-model="formData.displayOption.statusQuo"/>Status Quo
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" name="displayOption" ng-model="formData.displayOption.doNothing"/>Do Nothing
    </label>
  </div>
  <div ng-repeat="ActionController as actionCtrl">
    <a>{{ page.name }}</a>
    {{ message }}
  </div>
</form>
</body>
</html>

AngularJS

angular.module('myApp', [])

.controller('FormController', ['$scope' ,function($scope) {

  // Just for outputting data
  $scope.formData = {};

    // Trying to place the boolean value of each checkbox into a variable
    var value1 = '$scope.fiftyMill';
    var value2 = '$scope.hundredMill';
    var value3 = '$scope.statusQuo';
    var value4 = '$scope.doNothing';

    // Checks to see which checkbox is selected then outputting array 
    // associated with selection 
    if (value1 === true || value2 === true) {
        this.page = groupOne
    } else if (value3 === true) {
        this.page = groupTwo
    } else if (value1 === true || value2 === true && value3 === true) {
        this.page = groupThree + groupOne + groupTwo
    }else{
        this.message = 'No Options'
    }

    // Array gtoups
    var groupOne = [
      { name: 'BudgetCharts'},
      { name: 'BudgetComparison'},
      { name: 'EDITBudgetAmounts'}
    ]

    var groupTwo = [
      { name: 'Optimize'},
      { name: 'ReviewAndAdjust'}
    ]

    var groupThree = [
        { name: 'Export'},
        { name: 'Import'},
        { name: 'Construction Program'},
        { name: 'ExportStrategies'}
    ]
}]);

更新了关于我当前的代码如何与可用的代码笔一起工作的问题

Answer 1

不太了解，但我认为您缺少 "two-way data binding" 的诀窍！

如果模型发生变化（使用 ng-model 在 html 中输入），通过刷新控制器（js 代码），Twoway 数据绑定使您的 angular 应用真正动态化。

在 codepen 上查看此示例：http://codepen.io/ngocminh1112/pen/EjPapL 查看下面的示例表单对象，angular 如何通过与输入交互来更新 formData 变量。

因此，有一个名为 formData 的变量绑定到作用域：

$scope.formData = {};

并且所有输入都使用自定义属性.

获取一个变量当您与输入交互时，

Angular 更新 scope.formData 对象。

Answer 2

我尝试在上面的上下文中应用ng-if，它似乎很有用。您可以使用 ng-if 来显示和隐藏 DOM 元素，在本例中显示组数据。因此，如果选中第三个复选框，则显示第 2 组数组：

   <h4>Group2</h4>
   <div ng-repeat="g2 in groupTwo" ng-if="value3">
      {{g2.name}} 
   </div>

如果外观取决于多个模型，则可以在 ng-if 表达式中应用布尔条件，如下所示：

   <h4>Group 1</h4>
   <div ng-repeat="g1 in groupOne" ng-if="value1 && value2">
      {{g1.name}} 
   </div>

我在旧答案中发现了以上内容：angular-ng-if-with-multiple-arguments

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="checkBoxExample">
  <script>
  angular.module('checkBoxExample', [])
    .controller('ActionController', ['$scope', function($scope) {

      $scope.groupOne = [{name:'BudgetCharts'},{name:'BudgetComparison'},{name:'EDITBudgetAmounts'}];
      
      $scope.groupTwo  = [{name:'Optimize'},{name:'ReviewAndAdjust'}];
      
      $scope.groupThree = [{ name: 'Export'},{ name: 'Import'},{ name: 'Construction Program'}, { name: 'ExportStrategies'}];     
    }]);
</script>
<form name="selectionForm" ng-controller="ActionController">
    <table class="table table-striped">
        <thead>
           ...nothing important in here
        </thead> 
        <tbody>
           <tr>
              <td>
                 <div class="checkbox">
                     <label>
                         <input type="checkbox" id="selectionCondition" ng-model="value1" ng-checked="value1"/>50 million
                         <button rel="popover" type="button" class="close hoverMessage" data-dismiss="modal" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?">
                              <span class="fa fa-info-circle">Button 1</span>
                         </button>
                     </label>
                  </div>
                </td>
       
             </tr>
             <tr>
                <td>
                   <div class="checkbox">
                       <label>
                           <input type="checkbox" id="selectionDistribution" ng-model="value2" ng-checked="value2"/>100 million
                              <button rel="popover" type="button" class="close hoverMessage" data-dismiss="modal" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?">
                                  <span class="fa fa-info-circle">Button 2</span>
                              </button>
                       </label>
                   </div>
                </td>
             </tr>
             <tr>
                <td>
                   <div class="checkbox">
                        <label>
                            <input type="checkbox" value="status" id="selectionProgram" ng-model="value3" ng-checked="value3"/>Status Quo
                            <button rel="popover" type="button" class="close hoverMessage" data-dismiss="modal" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?">
                               <span class="fa fa-info-circle">Button 3</span>
                            </button>
                        </label>
                    </div>
                 </td>
              </tr>
              <tr>
                 <td>
                     <div class="checkbox">
                          <label>
                             <input type="checkbox" value="nothing" id="selectionTreatment" ng-model="value4" ng-checked="value4"/>Do Nothing
                             <button rel="popover" type="button" class="close hoverMessage" data-dismiss="modal" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?">
                                 <span class="fa fa-info-circle">Button 4</span>
                             </button>
                        </label>
                     </div>
                 </td>
              </tr>
          </tbody>
       </table>
       <h4>Group 1</h4>
       <div ng-repeat="g1 in groupOne" ng-if="value1 && value2">
          {{g1.name}} 
       </div>
       
       <br>
       <h4>Group 2</h4>
       <div ng-repeat="g2 in groupTwo" ng-if="value3">
          {{g2.name}} 
       </div>
       
       <br>
       
       <h4>Group 3</h4>
       <div ng-repeat="g3 in groupThree" ng-if="value1 && value2 && value3">
          {{g3.name}} 
       </div>
       
        <br>

       <div ng-if="value4">
          <b>Do Nothing selected</b>
       </div>
    </form>
</body>

Answer 3

我不确定您想实现什么，但我可以像这样编写您的示例代码：http://codepen.io/anon/pen/xGNLJe?editors=101

解释：

(function(angular) {
  "use strict";

  angular
    .module('formApp', [])
    .controller('FormController', ['$scope', function($scope) {
      var groupOne = [
        { name: 'BudgetCharts'},
        { name: 'BudgetComparison'},
        { name: 'EDITBudgetAmounts'}
      ];

      var groupTwo = [
        { name: 'Optimize'},
        { name: 'ReviewAndAdjust'}
      ];

      var groupThree = [
        { name: 'Export'},
        { name: 'Import'},
        { name: 'Construction Program'},
        { name: 'ExportStrategies'}
      ];

      $scope.formData = {};

      $scope.$watch("formData.displayOption", function(displayOption) {
        if(displayOption) {
          var value1 = displayOption.fiftyMill,
              value2 = displayOption.hundredMill,
              value3 = displayOption.statusQuo,
              value4 = displayOption.doNothing;

          $scope.pages = null;
          $scope.message = null;

          if (value1 === true || value2 === true) {
            $scope.pages = groupOne;
          } else if (value3 === true) {
            $scope.pages = groupTwo;
          } else if (value1 === true || value2 === true && value3 === true) {
            $scope.pages = groupThree + groupOne + groupTwo;
          } else {
            $scope.message = 'No Options';
          }
        }
      }, true);
    }]);
})(angular);

所以，一步一步来：

移除ng-click:

如您所见，复选框的标记现在如下所示：

<input type="checkbox" name="displayOption" ng-model="formData.displayOption.fiftyMill"/>

我删除了您的 ng-click 处理程序并处理 ng-model 更新 $scope.$watch (https://docs.angularjs.org/api/ng/type/$rootScope.Scope)，如下所示：

$scope.$watch("formData.displayOption", function(displayOption) { ... }, true);

添加$scope.pages和$scope.message变量，在代码中与之交互并在视图中显示。这是你的 $watch 函数的主体：

每次 "watching" 变量（formData.displayOption 在你的情况下）改变时都会触发。

$scope.pages = null;
$scope.message = null;

if (value1 === true || value2 === true) {
    $scope.pages = groupOne;
} else if (value3 === true) {
    $scope.pages = groupTwo;
} else if (value1 === true || value2 === true && value3 === true) {
    //
    // Algorithm never goes here, because:
    // value1 === true || value2 === true, always goes to first if block
    // value3 === true, it goes to second if block
    // there aren't any other options to go here 
    //
    $scope.pages = groupThree + groupOne + groupTwo;
    //
    // groupThree, groupOne, groupTwo are arrays. If you plus
    // arrays in javascript like this: 
    // [1,2] + [3,4,5] you will get string = "1,23,4,5"
    //
    // if you want to have [1,2,3,4,5] array as result of adding arrays,
    // you have to use concatenation like this:[1,2].concat([3,4,5])
    //
    // In your case:
    // $scope.pages = groupThree.concat(groupOne.concat(groupTwo));
} else {
    $scope.message = 'No Options';
}

然后显示在视图中（如您所见，您将数组分配给 $scope.pages，因此您可以使用 ng-repeat 对其进行迭代）：

<h3>Pages</h3>
<div ng-repeat="page in pages">
  {{ page.name }}
</div>  

<div>{{ message }}</div>

P.S。查看我的代码中的注释，您可能在我注释的地方有错误。

AngularJS 基于关闭复选框选择显示数组

AngularJS display array based off checkbox selection

javascript

arrays

checkbox

angularjs

angular-ngmodel