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"
    }]
}

这是一个对象数组，代表合作伙伴的type，每个对象都包含数组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链接。

希望它有所帮助！

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

1 个答案: