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

时间:2016-09-21 15:23:23

标签: javascript angularjs json

homepalGroupProp.properties中的

属性

我的json数据:

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

   like this  {
      "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代码:

<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)">{{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 currentdata" ng-repeat-end="">

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

控制器代码:

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

所以我得到的数据和第一次ng-repeat开始循环很好,但当我点击第一行时。显示1bhk,2bhk,3bhk中的相同行,如enter image description here

我想要这样enter image description here

1 个答案:

答案 0 :(得分:1)

我得到了完美的答案

<tr ng-repeat-start = "property in homepalGroupProp.properties" ng-show="project.properties.length>3">
                                    <td ng-click="showDetails = ! showDetails">{{property.UnitName}}
                                        <i class="fa fa-chevron-down" aria-hidden="true" ng-class="{ 'hidden':showDetails }"></i>
                                        <i class="fa fa-chevron-up" aria-hidden="true" ng-class="{ 'hidden':!showDetails }"></i>
                                    </td>
                                    <td>{{property.price_per_sqft}}</span></td>
                                    <td>{{}}</td>
                                </tr>
                                <tr ng-repeat-end ng-class="{ 'hidden': ! showDetails }" ng-repeat="unitProp in property.data" >

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