我有4个复选框，根据选择的一个/一对，我希望在页面上显示一个特定的数组。我对angularjs比较新，所以我不知道如何让它工作。那么我该如何a）检查通过角度选择哪个复选框，b）打印出特定的数组，以及c）如果选择“Do Nothing”，将显示一条消息而不是数组。内容应该是动态的，因此如果我选择不同的复选框，内容也会发生变化。 http://codepen.io/MarkBond/pen/gpJWKe?editors=101“简单表单对象”只是为了显示当前布尔值不是应该出现的名称数组。
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'}
]
}]);
更新了我的当前代码如何与可行的代码集一起工作的问题
答案 0 :(得分：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>
答案 1 :(得分：2)
我不确定你想要实现什么，但我可以像这样编写你的例子：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（https://docs.angularjs.org/api/ng/type/$rootScope.Scope）处理$scope.$watch更新，如下所示：
$scope.$watch("formData.displayOption", function(displayOption) { ... }, true);
$scope.pages和$scope.message变量，在代码中与其进行交互并在视图中显示。这是你的$ watch函数的主体：这种情况每当发生时都会发生火灾。变量（在您的情况下为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。看看我的代码中的评论，你可能会在我评论过的地方出错。