我有 4 个复选框，根据选择的一个/对，我希望在页面上显示特定的数组。我对 AngularJS 比较陌生，所以我不知道如何让它工作。那么我如何a)检查通过 Angular 选择了哪个复选框，b)打印出特定的数组，c)如果选择“Do Nothing”，则会出现一条消息而不是数组。内容应该是动态的，因此如果我选择不同的复选框，内容也会改变。 http://codepen.io/MarkBond/pen/gpJWKe?editors=101 “简单表单对象”只是为了显示当前 bool 值不是应该出现的名称数组。
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'}
]
}]);
更新了我当前的代码如何与可用的代码笔一起工作的问题
最佳答案
我不确定你想实现什么，但我可以像这样编写你的示例: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 变量，在代码中与其交互并在 View 中显示。这是 $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';
}
然后在 View 中显示(如您所见，您将一个数组分配给 $scope.pages ，这样您就可以使用 ng-repeat 对其进行迭代):
<h3>Pages</h3>
<div ng-repeat="page in pages">
{{ page.name }}
</div>
<div>{{ message }}</div>
附注查看我的代码中的注释，您可能在我注释的地方有错误。
关于javascript - AngularJS 基于复选框选择显示数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32013196/