AngularJS如何获取布尔值

AngularJS how to get boolean value

本文关键字：获取 布尔值 何获取 AngularJS      更新时间：2023-09-26

我试图找出如果一个或两个颜色复选框被选中，并取决于哪一个/对被选中，该颜色的对象将在表单上输出。因此，如果用户选中了"紫色"复选框，那么将会有一堆紫色的对象输出到表单中。如果同时选中"紫色"answers"黄色"，则紫色和黄色的对象都将输出到屏幕上。我一直试图检查复选框是否为"真"，看看它是否被选中，但我的逻辑有问题。http://codepen.io/MarkBond/pen/pJmrxV?editors=101 Thanks in advance

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

$scope.yourFuction应该是$scope.yourFunction，对于您的if语句，您应该检查$scope.formData.displayOption.purple而不是$scope.purple 

var purple = $scope.formData.displayOption.purple;
var yellow = $scope.formData.displayOption.yellow;

http://codepen.io/anon/pen/LVozZG?编辑= 101https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

相关文章：