Angular JS - 父子节点 - 处理菜单和子菜单答案

【问题标题】：Angular JS - Parent and Child Node - Handling menu and sub-menuAngular JS - 父子节点 - 处理菜单和子菜单
【发布时间】：2017-06-15 18:54:35
【问题描述】：

请帮助我使用以下代码。我创建了这个，以便任何人都可以进行更改并给我一个解决方案。

HTML

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
    <ul>
        <li ng-repeat="continent in destinations">
            <input type="checkbox" ng-model="continent.selected" ng-change="parentChange($index)"> {{continent.name}} ({{continent.countries_selected}}
            / {{continent.countries.length}}) - {{continent.all_selected}}
            <ul>
                <li ng-repeat="country in continent.countries">
                    <input type="checkbox" ng-model="country.selected"> {{country.name}} </li>
            </ul>
        </li>
    </ul>
    <p>You have selected: {{total_selected}} Countries in Total</p>
</body>

</html>

控制器

app.controller('MainCtrl', function($scope) {

  $scope.total_selected = 0;

  $scope.$watch('destinations', function(destinations){

    var total_selected = 0;

    angular.forEach(destinations, function(continent){

      continent.countries_selected = 0;

      angular.forEach(continent.countries, function(country){

        total_selected += country.selected ? 1 : 0

        continent.countries_selected += country.selected ? 1 : 0

        if (continent.countries_selected == continent.countries.length) {
          continent.selected = true;
        } else {
          continent.selected = false;
        }

      });

    });

    $scope.select_all = function(continent){
      continent.selected = true;
    }

    $scope.total_selected = total_selected;

  }, true);

  $scope.select = function(continent){
    console.log(continent)
    continent.selected = true;
  }

  $scope.parentChange = function(index) {
    angular.forEach( $scope.destinations[index].countries, function(country) {
      country.selected = $scope.destinations[index].selected;
    });
  };

  $scope.destinations = [
    {
      "name": "India",
      "countries": [
        {
          "name": "Mumbai"
        },
        {
          "name": "Delhi"
        },
        {
          "name": "Calicut"
        }
      ]
    },
    {
      "name": "America - US",
      "countries": [
        {
          "name": "New York"
        },
        {
          "name": "Canada"
        },
        {
          "name": "Miami"
        },
        {
          "name": "Hackensack"
        }
      ]
    }
  ];

});

Fiddle Link

我想做的是：

例如：如果我选择一个子节点（德里），那么应该自动检查父节点（印度）。

换句话说，任何被检查的子节点都应该立即检查父节点，反之亦然

谢谢，金兹。

【问题讨论】：

标签： javascript html angularjs angularjs-directive

【解决方案1】：

这是一个非常简单的更改，现在您正在查看集合中的更改并在其中执行此操作

if (continent.countries_selected == continent.countries.length) {
    continent.selected = true;
} else {
    continent.selected = false;
}

而您真正想要的是，如果为要选择的大陆选择了至少 1 个国家/地区，那么只需将其更改为

if (continent.countries_selected > 0) {
    continent.selected = true;
} else {
    continent.selected = false;
}

Fiddle For Example

【讨论】：