选中两个复选框时如何以angularjs形式显示数据？

Question

我有一个包含 4 个复选框的表单 -

■ angularjs ■ jquery ■ ruby​​ ■ 什么都不做

在我的控制器中有一个$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);

我分配给 $scope.pages 的 groupOne,groupTwo,groupThree 是

  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。将watch 中的if-else 块更改为：

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

更新了插件here.

编辑： 此外，在您的手表中使用$scope.pages = []; 而不是$scope.pages = null;。