AngularJS基於關閉復選框選擇的顯示數組

Question

我有4個復選框，並且希望根據選擇的一個/對，將特定的數組顯示在頁面上。 我對angularjs相對較新，所以我不確定如何使它工作。 因此，我如何a）選中通過angular選中的復選框，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

Answer 1

我嘗試在上述情況下應用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-arments

 <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>

Answer 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處理程序並使用$scope.$watch （ https://docs.angularjs.org/api/ng/type/$rootScope.Scope ）處理ng-model更新，如下所示：

$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>

PS查看我的代碼中的注釋，您在我注釋的地方可能有錯誤。

Answer 3

不太了解，但我認為您缺少“雙向數據綁定”的專業知識！

如果模型發生更改（使用ng-model在html中輸入），雙向數據綁定將通過刷新控制器（js代碼）使您的角度應用程序真正具有動態性。

在codepen上檢查以下示例： http ://codepen.io/ngocminh1112/pen/EjPapL在鋼筆下方的Sample Form Object上查看，角度如何通過與輸入交互來更新formData變量。

因此，有一個名為formData的變量綁定到范圍：

$scope.formData = {};

並且所有輸入都會獲得具有自定義屬性的一個變量。

與輸入進行交互時，Angular將更新scope.formData對象。

AngularJS基於關閉復選框選擇的顯示數組

問題描述

3 個解決方案

解決方案1
2 2015-08-14 17:01:03

解決方案2
2 已采納 2015-08-17 20:07:47

解決方案3
1 2015-08-14 16:01:11

AngularJS基於關閉復選框選擇的顯示數組

問題描述

3 個解決方案

解決方案1 2 2015-08-14 17:01:03

解決方案2 2 已采納 2015-08-17 20:07:47

解決方案3 1 2015-08-14 16:01:11

解決方案1
2 2015-08-14 17:01:03

解決方案2
2 已采納 2015-08-17 20:07:47

解決方案3
1 2015-08-14 16:01:11