AngularJS基于复选框选择的显示数组

AngularJS display array based off checkbox selection

本文关键字：显示数组选择复选框 AngularJS 更新时间：2023-09-26

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

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

更新问题与如何我当前的代码工作也与一个可行的codependency

我不确定你想要实现什么，但我可以像这样编码你的例子: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处理程序并使用$scope.$watch (https://docs.angularjs.org/api/ng/type/$rootScope.Scope)更新ng-model，如下所示:

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

添加$scope.pages和$scope.message变量，在代码中与之交互，并在视图中显示。这是$watch函数的主体:
每当"观看"变量(formData. html)时，该函数都会触发。

$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。分页一个数组，因此可以使用ng-repeat):
对其进行迭代。
<h3>Pages</h3> <div ng-repeat="page in pages"> {{ page.name }} </div> <div>{{ message }}</div>
注:看看我代码中的注释，你可能在我注释的地方有错误。

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

<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>

我不太明白，但我认为您错过了"双向数据绑定"的诀窍!
如果模型发生变化，双向数据绑定会刷新控制器(js代码)，从而使你的angular应用真正具有动态性(html中的输入使用ng-model)。

在codepen: http://codepen.io/ngocminh1112/pen/EjPapL查看这个例子看看下面的示例表单对象，angular是如何通过与输入交互来更新formData变量的。
因此，有一个名为formData的变量绑定到作用域:

$scope.formData = {};
和所有的输入得到一个具有自定义属性的变量

Angular会更新作用域。

相关文章：
Jquery/Javascript:通过按下按钮显示数组中的随机图像

以angular.js显示数组

我想使用Javascript中的循环在HTML中的特定id中显示数组中的多个对象

Javascript-如何在窗体上方显示数组的值

在表中显示数组对象

在两个位置显示数组中的随机单词

如何显示数组中的图像?JavaScript

在页面上显示数组

如何使用JavaScript/AngularJS在控制台中显示数组长度

流星:显示数组数据，因为表在添加新列时给出了重复值

显示数组的内容

如何在 JavaScript 中显示数组的所有元素

jQuery:如何在不使用每个循环的情况下显示数组的第一个元素

Jquery UI 自动完成中的 PHP 显示数组

如何通过单击显示数组和按钮

ng-重复不显示数组中的值

如何在流星中显示数组

在输入数组元素时在 html 页面中显示数组元素

Javascript 如何在新行上显示数组的每个元素

显示数组中的图像不起作用