javascript - 基于单击嵌套 ng-repeat 中的特定 json 数组来显示行？

Question

property  in homepalGroupProp.properties

我的 json 数据:

property=[{unitname : 1bhk, data:[{}]] }, {unit name : 3bhk},{}]

像这样

{
    "UnitName": "3 BHK",
    "data": [
    {
        "UnitName": "3 BHK+3T",
        "property_size": "1521 ",
        "bedrooms": 3,
        "unit_type_name": "3 BHK",
        "unit_type_status": 1,
        "UnitPrice": 6538779,
        "price_per_sqft": "4299",
        "hp_property_id": 9,
        "unit_price_id": 51,
        "$$hashKey": "object:65"
    },
    {
        "UnitName": "3 BHK+3T",
        "property_size": "1523 ",
        "bedrooms": 3,
        "unit_type_name": "3 BHK",
        "unit_type_status": 1,
        "UnitPrice": 6547377,
        "price_per_sqft": "4299",
        "hp_property_id": 9,
        "unit_price_id": 52,
        "$$hashKey": "object:66"
    },
    {
        "UnitName": "3 BHK+3T",
        "property_size": "1525 ",
        "bedrooms": 3,
        "unit_type_name": "3 BHK",
        "unit_type_status": 1,
        "UnitPrice": 6555975,
        "price_per_sqft": "4299",
        "hp_property_id": 9,
        "unit_price_id": 53,
        "$$hashKey": "object:67"
    },
    {
        "UnitName": "3 BHK+3T",
        "property_size": "1526 ",
        "bedrooms": 3,
        "unit_type_name": "3 BHK",
        "unit_type_status": 1,
        "UnitPrice": 6560274,
        "price_per_sqft": "4299",
        "hp_property_id": 9,
        "unit_price_id": 54,
        "$$hashKey": "object:68"
    }
    ],
        "$$hashKey": "object:46"
}

我的html代码:

<div  ng-init ='homepalGroupProp.properties=hmpalprop(project.properties);'>


                                    <tr ng-repeat-start="property in homepalGroupProp.properties" ng-show="project.properties.length>3" ng-click="homepalGroupProp.expanded = !homepalGroupProp.expanded">
                                        <td ng-click="projectListingCluster(property.data,homepalGroupProp.expanded,$parent.$index,$index,property)">{{property.UnitName}}
                                            <span ng-if="!homepalGroupProp.expanded">
                                              <i class="fa fa-chevron-down" aria-hidden="true"></i>
                                            </span></td>
                                        <td><span>{{}}</span></td>
                                        <td><span>{{property.price_per_sqft}}</span></td>
                                    </tr>

                                    <tr ng-if="homepalGroupProp.expanded" ng-repeat="prop in property.data" ng-repeat-end="">

                                        <td>{{prop.UnitName}}</td>
                                        <td>{{prop.UnitPrice}}</td>
                                        <td>{{}}</td>
                                    </tr>



                                </div>

Controller 代码:

 $scope.projectListingCluster=function (p,ex,$index) {
     alert(ex +"..ex");
     alert(p+"..p");
     $scope.currentdata=p;
     alert(JSON.stringify($scope.currentdata));
     alert($index);
 }

我得到的循环是完美的，但是当我单击第一行(如 1bhk)时。它打开所有行。所以我想隐藏两行(2bhk，3bhk)。如果我单击两行，那么它可以显示两行。

Answer 1

我认为你需要像这样转换属性 json:

properties:[{
    UnitName:'3BHK',
    Items:[{as the property}, ...]
}, {UnitName:'', Items:[]}]

然后嵌套两个ng-repeater来实现目标:

<tbody ng-repeat="group in properties">
    <tr>
        <td ng-click="expand">{{group.UnitName}}</td>
    </tr>
    <tr ng-repeat="item in Items" ng-show="Items.length<=3">
       <td>{{item.UnitName}}</td>
       ...
    </tr>
</tbody>