Angular JS-父級和子級節點-處理菜單和子菜單

Question

請幫我下面的代碼。 我創建了此文件，以便任何人都可以進行更改並提供解決方案。

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"
        }
      ]
    }
  ];

});

小提琴鏈接

我想做的是：

例如：如果我選擇一個子節點（Delhi），則應自動檢查父節點（印度）。

換句話說，任何選中的子節點都應立即檢查父節點，反之亦然

謝謝，金茲。

Answer 1

這是一個非常簡單的更改，現在您正在監視集合中的更改並在其中進行更改

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

而您真正想要的是，如果要選擇要選擇的大陸至少選擇了一個國家，那么只需將其更改為

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

小提琴例如

Angular JS-父級和子級節點-處理菜單和子菜單

問題描述

1 個解決方案

解決方案1
0 已采納 2017-06-15 10:51:38

Angular JS-父級和子級節點-處理菜單和子菜單

問題描述

1 個解決方案

解決方案1 0 已采納 2017-06-15 10:51:38

解決方案1
0 已采納 2017-06-15 10:51:38