В моем приложении "Угловое" у меня есть следующий список флажков, сгенерированный внутри вложенного ng-repeat
:
<div ng-repeat="type in boundaryPartners">
<div class="row" ng-show="showBPtype[$index]">
<div class="col-xs-12">
<div ng-repeat="partner in type.partners">
<label class="checkbox-inline">
<input type="checkbox"
value="partner.id"
ng-model="partner.selected"
ng-change="changeValue(partner)"
/>
<p><span ></span>{{partner.name}}<p>
</label>
</div>
</div>
</div>
</div>
Этот список извлекается из данных и имеет следующую структуру (образец):
{
"id": 1,
"name": "Civil Society Organizations",
"partners": [{
"id": 1,
"name": "Youth Association"
}, {
"id": 2,
"name": "Rwanda Network"
}, {
"id": 3,
"name": "Communité du Rwanda"
}]
},
{
"id": 2,
"name": "Educational Organizations",
"partners": [{
"id": 16,
"name": "SchoolA"
}, {
"id": 17,
"name": "SchoolB"
}]
}
Это массив объектов, которые представляют type
партнера, каждый из которых содержит список партнеров того времени в рамках partners
массива.
Это будет выглядеть следующим образом:
Когда пользователь выбирает партнера с chekcbox, этот партнер должен быть добавлен во вложенный список выбранных партнеров (после аналогичной структуры), а когда пользователь отменяет выбор флажка, этот партнер должен быть удален.
У меня уже есть рабочее решение для единственного списка партнеров, который был предоставлен пользователем Артемом Прановичем в его ответе (все ему в кредит).
Это его код:
var partnersList = [], idsArray = [];
$scope.changeValue = function(partner){
if(partner.selected)
addPartner(partner);
else
removePartner(partner);
};
var addPartner= function(partner){
if(!existInList(partner))
partnersList.push(partner);
};
var removePartner= function(partner){
idsArray = getIdsArray();
var indexToRemove = idsArray.indexOf(partner.id);
if(indexToRemove == -1)
return;
partnersList.splice(indexToRemove, 1);
};
var existInList = function(partner){
idsArray = getIdsArray();
return idsArray.indexOf(partner.id) != -1;
};
var getIdsArray = function(){
return partnersList.map(function(partner){ return partner.id });
};
Однако, используя описанный выше интерфейс, мне нужно заполнить вложенный список партнеров, содержащий только тех партнеров, которые выбрали пользователем, с той же структурой, что и ранее: список объектов-партнеров, организованных по типу (который имеет type.id
и массив type.partners
).
Я пробовал некоторые решения, используя $parent.$index
и $index
чтобы определить, какого партнера я должен добавлять/удалять, когда это необходимо, но я не могу обернуться вокруг этого.
Какой был бы лучший способ адаптировать предлагаемый код к моим потребностям?
EDIT: добавление структуры окончательного списка, содержащего выбранных партнеров (т.е. Список, по которому партнеры должны будут перенаправляться), по запросу. Образец:
[
{
"id": 1,
"entities": [
{
"id": 2,
"name": "Entity 2"
},
{
"id": 3,
"name": "Entity 3"
}
]
},
{
"id": 2,
"entities": [
{
"id": 2,
"name": "Entity 2"
}
]
}
]
В приложении этот список называется $scope.report.participatingPartners
.
Если я понял вашу проблему, решение будет с ним аналогичным.
Если у вас есть вопросы, не стесняйтесь спрашивать.
<div ng-repeat="organization in boundaryPartners">
<div ng-repeat="partner in organization.partners">
<label>
<input type="checkbox" value="partner.id" ng-model="partner.selected"
ng-change="changeValue(partner, organization, $parent.$index)"/>
{{partner.name}}
</label>
</div>
<hr/>
</div>
$scope.participatingPartners = []
var idsArray = [];
$scope.changeValue = function(partner, organization, index){
if(partner.selected)
addPartner(partner, organization, index);
else
removePartner(partner, organization, index);
};
var addPartner= function(partner, organization, index){
prepareArrayToAdd(organization, index);
if(!existInList(index, partner)){
$scope.participatingPartners[index].partners.push(partner);
}
};
var prepareArrayToAdd = function(organization, index){
if(!$scope.participatingPartners[index])
$scope.participatingPartners[index] = { id: organization.id, name: organization.name, partners: [] };
};
var removePartner= function(partner, organization, index){
idsArray = getIdsArray(index);
var indexToRemove = idsArray.indexOf(partner.id);
if(indexToRemove == -1)
return;
$scope.participatingPartners[index].partners.splice(indexToRemove, 1);
};
var existInList = function(index, partner){
idsArray = getIdsArray(index);
return idsArray.indexOf(partner.id) != -1;
};
var getIdsArray = function(index){
return $scope.participatingPartners[index].partners.map(function(partner){ return partner.id });
};
Надеюсь, поможет!