Заполнение вложенного массива входными флажками в приложении Angular

0

В моем приложении "Угловое" у меня есть следующий список флажков, сгенерированный внутри вложенного 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 массива.

Это будет выглядеть следующим образом:

Изображение 174551

Когда пользователь выбирает партнера с 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.

  • 0
    Не могли бы вы опубликовать свое не работающее приложение?
  • 0
    Просьба привести пример желаемой структуры JSON (которая будет содержать уже выбранных партнеров). Непонятно, куда вы хотите добавить выбранных партнеров.
Показать ещё 7 комментариев
Теги:
arrays

1 ответ

1
Лучший ответ

Если я понял вашу проблему, решение будет с ним аналогичным.

Если у вас есть вопросы, не стесняйтесь спрашивать.

<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 });
};

JSFIddle.

Надеюсь, поможет!

  • 0
    reformatArrayAfterRemove (), кажется, отсутствует, хотя.
  • 1
    @Tiago. Эта функция избыточна, см. JSFiddle для живой демонстрации. Я обновил код в ответе.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню