0
Я пытаюсь выяснить, выбран ли один или оба из двух цветных флажков, и в зависимости от того, какая из них выбрана, объекты этого цвета будут выводиться в форме. Поэтому, если пользователь проверил флажок «фиолетовый», тогда в форму будет добавлен пурпурный объект. Если «фиолетовый» и «желтый» оба проверены, на экран выводятся фиолетовые и желтые объекты. Я пытаюсь проверить, установлен ли флажок «true», если он был выбран, но с моей логикой что-то не так. http://codepen.io/MarkBond/pen/pJmrxV?editors=101 Заранее спасибоAngularJS как получить логическое значение
HTML
<html ng-app="formApp">
<head>
<!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
body { padding-top:50px; }
form { margin-bottom:50px; }
</style>
<!-- JS -->
<!-- load up angular and our custom script -->
<script src="http://code.angularjs.org/1.3.14/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app and controller -->
<body ng-controller="FormController as formCtrl">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<h2>Angular Checkboxes</h2>
<form>
<div class="checkbox">
<label>
<input type="checkbox" name="displayOption" ng-model="formData.displayOption.purple" ng-click="yourFunction()" />purple
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="displayOption" ng-model="formData.displayOption.yellow" ng-click="yourFunction()" />yellow
</label>
</div>
</form>
<h2>Array/Message Output Area</h2>
<pre>
<div ng-repeat="object in formCtrl.objects">
{{ object.name }}
</div>
{{ message }}
</pre>
<!-- SHOW OFF OUR FORMDATA OBJECT -->
<h2>Boolean Test Area</h2>
<pre>
{{ formData }}
</pre>
</div>
</body>
</html>
AngularJS
angular.module('formApp', [])
.controller('FormController', ['$scope' ,function($scope) {
$scope.formData = {};
$scope.yourFuction = function(){
var purple = $scope.purple;
var yellow = $scope.yellow;
if (purple === true && yellow === true) {
this.objects = groupOne
} else if (purple === true) {
this.objects = groupTwo
} else if (yellow === true) {
this.objects = groupOne + groupTwo
}else{
this.message = 'Nothing Selected'
}
};
var groupOne = [
{ name: 'Grape'},
{ name: 'Wine'},
{ name: 'Toy Octipus'}
]
var groupTwo = [
{ name: 'Banana'},
{ name: 'Lemon'},
{ name: 'Yellow Highlighter'}
]
}]);