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

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 :

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

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

i am getting loop is perfect but when i am clicking on first row like 1bhk.its opening all the rows.so i want to hide the two rows(2bhk,3bhk).if i clicked on two rows then its can show two rows.

have you tried using <tr ng-if="isComposite"> , with double quote "isComposite" — masadi zainul
– masadi zainul, Commented Sep 19, 2016 at 2:43
iscomposite is working but when iam looping with ng-repeat .its overriding the variable getting true(if properties length <=3 ).see in controller code — Simha Chalam
– Simha Chalam, Commented Sep 19, 2016 at 2:57
use ng-class="listclass", but i think you should add a new question for this, not modify the old. — aspark
– aspark, Commented Sep 22, 2016 at 5:28

aspark · Accepted Answer · 2016-09-19 03:35:33Z

1

i think you need transform the properties json like this:

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

then nest two ng-repeater to archieve the target:

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

answered Sep 19, 2016 at 3:35

aspark

3702 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

masadi zainul · Accepted Answer · 2016-09-19 03:36:24Z

1

you typo in your controller code

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

try this

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

hope can help you

answered Sep 19, 2016 at 3:36

masadi zainul

3974 silver badges14 bronze badges

6 Comments

Simha Chalam Over a year ago

getting that properties.length and loop index(0,1,2) based on this only . i can know the properties length in controller if properties length is less than 3 then i will assign the variable (iscomposite=false) .if iscomposite is false .then i below tr directly iterates.if (properties length >3) its will show hide and show based on particular unit type under (1bhks,2bhks,3bhks) but in dummy function that iscomposite is getting (override) and ther is not getting link between the ng-repeat and iscomposite.i am facing major problem that one only

masadi zainul Over a year ago

where dummy function call ?

Simha Chalam Over a year ago

at the start time of ngrepeat

masadi zainul Over a year ago

when you call ng-init in start of ngrepeat , ng-init will be called once , so when ng-repeat do repeat ng-init doesn't call again.. you can call dummy function inside ng-repeat like this jsfiddle.net/fqnKt/37 because you need compare each item

masadi zainul Over a year ago

@SimhaChalam how ?

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related