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

时间:2016-09-19 02:30:18

标签: javascript angularjs arrays json

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>

控制器代码:

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

我正在获得循环是完美的,但当我点击第一行像1bhk.its打开所有行。所以我想隐藏两行(2bhk,3bhk)。如果我点击两行然后它可以显示两排。

enter image description here

enter image description here

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

你的控制器代码输错了

$scope.dummy = function(properties, $index) {
    proplength = properties.lengt

试试这个

$scope.dummy = function(properties, $index) {
    proplength = properties.length

希望可以帮到你