Angular JS - 家長和孩子節點 - 處理菜單和子菜單

請幫我下面的代碼。我已經創建了這個，以便任何人都可以進行更改並給我一個解決方案。Angular JS - 家長和孩子節點 - 處理菜單和子菜單

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="[email protected]" 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

我想要做的是：

對於例如：如果我選擇一個孩子節點（德里），然後父節點（印度）應該自動檢查。

換句話說，檢查應立即檢查父節點，反之亦然

謝謝， Kimz任何子節點。

來源

2017-06-15 Kimz

這是一個非常簡單的變化，現在你看更改的收集和這樣做的它

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

來源

2017-06-15 10:51:38 George

@喬治 - 由於一噸！優秀。簡單而且謝謝 – Kimz

Angular JS - 家長和孩子節點 - 處理菜單和子菜單

回答

相關問題