display rows based on clicking on particular json array in nested ng-repeat in angularjs?

Question

property in homepalGroupProp.properties

my json data :

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

my html code :

<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>

controller code :

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

so i am getting data and first ng-repeat start loop is good but when i am clicking on first row .its showing the same rows in 1bhk,2bhk,3bhk like this

i want like this

Sounds like you need some form tree view, i recommend you this: github.com/angular-ui-tree/angular-ui-tree , but there are many others examples... just look it up =) — Gustavo Gabriel
– Gustavo Gabriel, Commented Sep 21, 2016 at 15:30
no but i want tr,td format .every thing is working fine just i missed a small logic .see my ng-repeat-start and ng-repeat-end in first loop u get an idea for that — Simha Chalam
– Simha Chalam, Commented Sep 21, 2016 at 15:33

Simha Chalam · Accepted Answer · 2016-09-22 15:15:23Z

i got the perfect answer for this

<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>

Collectives™ on Stack Overflow

display rows based on clicking on particular json array in nested ng-repeat in angularjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related