javascript - 在 Angular 应用程序中使用复选框输入填充嵌套数组

Question

在我的 Angular 应用程序中，我有以下复选框列表，它们是在嵌套的 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"
    }]
}

这是一个对象数组，代表合作伙伴的类型，每个对象都包含数组partners中当时的合作伙伴列表。

最终看起来如下图所示:

当用户使用 chekcbox 选择合作伙伴时，该合作伙伴应该添加到选定合作伙伴的嵌套列表中(遵循类似的结构)，并且当用户取消选择复选框时，该合作伙伴将被添加到所选合作伙伴的嵌套列表中(遵循类似的结构)。合作伙伴将被删除。

我已经有一个working solution对于由用户 Artyom Pranovich in his answer 提供的合作伙伴的单一列表(这一切都归功于他)。

这是他的代码:

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 来查找必要时应该添加/删除的合作伙伴，但我不能我似乎对此很感兴趣。

使建议的代码适应我的需求的最佳方法是什么？

编辑:根据要求添加包含所选合作伙伴的最终列表的结构(即合作伙伴必须推送到的列表)。示例:

[
    {
        "id": 1,
        "entities": [
            {
                "id": 2,
                "name": "Entity 2"
            },
            {
                "id": 3,
                "name": "Entity 3"
            }
        ]
    },
    {
        "id": 2,
        "entities": [
            {
                "id": 2,
                "name": "Entity 2"
            }
        ]
    }
]

在应用程序中，此列表称为 $scope.report.participatingPartners。

Answer 1

如果我理解你的问题，解决方案将与it类似。 .

如果您有疑问，请随时提问。

<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链接。

希望对你有帮助!