【发布时间】：2015-08-14 15:06:47
【问题描述】：
我有 4 个复选框，根据选择的一个/对，我希望在页面上显示一个特定的数组。我对 angularjs 比较陌生，所以我不确定如何让它工作。那么我该如何a）通过角度检查选择了哪个复选框，b）打印出特定的数组，以及c）如果选择了“什么都不做”，则会出现一条消息而不是数组。内容应该是动态的，所以如果我选择不同的复选框，内容也会改变。 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'}
]
}]);
更新了关于我当前代码如何使用可行的 codepen 的问题
【问题讨论】：
-
您能否通过 JSFiddle 示例提供您的问题？
-
@FSou1 我也尝试过，但我对让它工作感到沮丧和困惑
-
@FSou1 更新了代码并添加了codepen
-
那么，我回答你的问题了吗？
-
@FSou1 是的，我只需要调整你的答案以匹配我的答案并将其标记为正确
标签： javascript arrays angularjs checkbox angular-ngmodel