如何檢查兩個複選框時以angularjs形式顯示數據？

Question

我有一個包含4個複選框形式 -

■angularjs■jQuery的■紅寶石■不執行任何操作

在我的控制器有一個$watch服務，就是保證它們越來越複選框的軌道點擊。

$scope.$watch("formData.displayOption", function(displayOption) { 
     if(displayOption) { 
      var value1 = displayOption.angularJs, 
       value2 = displayOption.jquery, 
       value3 = displayOption.ruby, 
       value4 = displayOption.doNothing; 

      console.log(value1, value2, value3, value4); 

      $scope.pages = null; 
      $scope.message = null; 

      if (value1 === true) { 
      $scope.pages = groupOne; 
      } else if (value2 === true) { 
      $scope.pages = groupTwo; 
      } else if (value3 === true) { 
      $scope.pages = groupThree; 
      } else { 
      $scope.message = 'No Options'; 
      } 
     } 
     }, true); 

和groupOne，groupTwo，groupThree我很分配給$ scope.pages是

var groupOne = [ 
    { name: 'js'}, 
    { name: 'angjs'}, 
    { name: 'angularjs'} 
    ]; 

    var groupTwo = [ 
    { name: 'jquery'}, 
    { name: 'jquery-ui'} 
    ]; 
    var groupThree = [ 
    { name: 'Ruby'} 
    ]; 

所以當angularjs檢查 - > groupOne同樣顯示jquery- > groupTwo & ruby​​-> groupThree

我想要做的是當兩個複選框被勾選時，我想顯示對應於複選框的數據，同樣當複選框未選中時，我希望數據消失。 像如果✓angularjs和✓jquery的然後顯示數據應該是

• JS
• angjs
• angularjs
• jquery的
• jQuery的UI

PLUNKER LINK

Answer 1

您可以使用concat將每個選定的項目追加到$scope.pages。更改if-else塊在watch到：

if (value1 === true) { 
    $scope.pages = groupOne; 
} if (value2 === true) { 
    $scope.pages = $scope.pages.concat(groupTwo); 
} if (value3 === true) { 
    $scope.pages = $scope.pages.concat(groupThree); 
} if(!value1 && !value2 && !value3) { 
    $scope.message = 'No Options'; 
} 

更新了plunker here.

編輯： 另外，代替$scope.pages = null;有$scope.pages = [];在你的手錶。