1
현재 체크 박스를 사용하여 트리 구조에 부모 하위 관계가있는 항목을 표시 할 수 있습니다. 이제 체크 된 체크 박스를 하나의 배열에 저장하여 그 데이터를 ajax를 통해 서버에 제출할 수 있어야합니다.angularjs 트리 구조의 체크 박스를 배열에 저장
나는 angularjs를 처음 사용합니다. ng-model 값을 사용하여 인쇄를 시도했습니다. 그러나 그것은 효과가 없습니다.
배열에 체크 된 체크 박스를 저장하는 방법을 알려주십시오.
다음은 코드입니다.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var app, list;
list = [
{
name: 'Developer',
opened: true,
children: [
{
name: 'Front-End',id:1,
children: [
{
name: 'Jack',id:2,
title: 'Leader'
},
{
name: 'John',id:3,
title: 'Senior F2E'
},
{
name: 'Jason',id:4,
title: 'Junior F2E'
}
]
},
{
name: 'Back-End',id:5,
children: [
{
name: 'Mary',id:6,
title: 'Leader'
},
{
name: 'Gary',id:7,
title: 'Intern'
}
]
}
]
},
{
name: 'Design',id:8,
children: [{
name: 'Freeman',id:9,
title: 'Designer'
}]
},
{
name: 'S&S',id:10,
children: [{
name: 'Nikky',id:11,
title: 'Robot'
}]
}
];
app = angular.module('testApp', []).controller('treeTable', [
'$scope',
'$filter',
function ($scope, $filter) {
$scope.list = list;
//$scope.item.selected={};
$scope.initCheckbox = function (item, parentItem) {
return item.selected = parentItem && parentItem.selected || item.selected || false;
};
$scope.toggleCheckbox = function (item, parentScope) {
if (item.children != null) {
$scope.$broadcast('changeChildren', item);
}
if (parentScope.item != null) {
return $scope.$emit('changeParent', parentScope);
}
};
$scope.$on('changeChildren', function (event, parentItem) {
var child, i, len, ref, results;
ref = parentItem.children;
results = [];
for (i = 0, len = ref.length; i < len; i++) {
child = ref[i];
child.selected = parentItem.selected;
if (child.children != null) {
results.push($scope.$broadcast('changeChildren', child));
} else {
results.push(void 0);
}
}
return results;
});
return $scope.$on('changeParent', function (event, parentScope) {
var children;
children = parentScope.item.children;
parentScope.item.selected = $filter('selected')(children).length === children.length;
parentScope = parentScope.$parent.$parent;
if (parentScope.item != null) {
return $scope.$broadcast('changeParent', parentScope);
}
});
}
]);
app.filter('selected', [
'$filter',
function ($filter) {
return function (files) {
return $filter('filter')(files, { selected: true });
};
}
]);
</script>
</head>
<body>
<div class="wrapper" ng-app="testApp" ng-controller="treeTable">
<table class="table-nested">
<tbody ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-repeat="item in list"></tbody>
</table>
<script id="table_tree.html" type="text/ng-template">
<tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">
<td class="cell-name">
<div class="indent" ng-click="item.opened = !item.opened"></div>
<input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}}
</td>
</tr>
<tr class="children" ng-if="item.children && item.children.length > 0">
<td colspan="4">
<table class="table-child">
<tbody ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody>
</table>
</td>
</tr>
</script>
{{item.selected | json}}
</div>
</body>
당신은 어떤 클릭에 제출하면서 확인 상자 목록을 얻을 필요가 데모를 볼 수 있습니까? –
예. 나는 각도 방식으로하고 싶다. 즉 배열을 체크 박스에 바인딩합니다. –