Geek Answers Handbook

$ Index scope extension when using ng-repeat in angularjs

I need to use the index value $ inside the ng-repeat directive from my scope. I tried several workarounds but was not successful.

Here is my code:

<tbody ng-init="countObj={"count":0}" >
            <tr ng-repeat="data in result.data1" ng-init="index1 = $index" ng-if='result.data1'>
                <td>{{countObj.count = index1+1}}</td> // here I assing index1 to parent scope count
                <td>{{data}}{{countObj.count}}</td> // here count has the correct value
                <td>{{result.data2[$index]}}</td>                   
            </tr>
            <tr ng-repeat="data in result.data3" ng-init="index2 = $index" ng-if='result.data3'>
                <td>{{index2+countObj.count}}</td> // here I add count to index2
                <td>{{result.data3[$index]}}{{countObj.count}}</td> // here count has no value
                <td>{{result.data4[$index]}}</td>
            </tr>
            <tr ng-if='result.data1 == undefined && result.data3 == undefined'>
                <td><strong>No data to display.</strong></td>
            </tr>
</tbody>

This complete table is inside the custom directive that I just posted the tbody tag.

The directive is as follows:

<concept-details ng-repeat = "result in searchRes.list"></concept-details>

The data is absolutely accurate, it's just an account that I can’t get in the second tr tag.

I tested the above solution for w3school and it works fine. Here is the code I tested:

<table>
<thead>
<tr>
    <th>S No.</th>
    <th>Header 1</th>
    <th>Header 2</th>

</tr>
</thead>
<tbody ng-init="count" >
    <tr ng-init="test = 5">
        <td>test is</td>
        <td>{{count = test}}</td>
        <td>end</td>
    </tr>
    <tr ng-init="test2 = 10">
        <td>test 2 is</td>
        <td>{{count + test2}}</td>
        <td>end</td>
    </tr>
</tbody>
</table>

I'm new to angularjs, kindly justifying any mistake I could make.

Any suggestions are welcome.

Thanks in advance.

Edit: Code changed to Naveen Kumar proposal, but still the same output

+4
1

ng-repeat -. ng-repeat , , , . ng-repeat

      childScope = scope.$new(); 
      childScope[valueIdent] = value;

count ($ scope)    countCopy ($ childScope)

, count .

, . count . , , count.

countObj ($ scope)    countObjCopy ($ childScope)

countObj countObjCopy

   //while initializing
   <tbody ng-init="countObj={"count":0}" >

   //while incrementing 
   <td>{{countObj.count= index1+1}}

, , , . angular , . . https://docs.angularjs.org/error/ $rootScope/infdig

, count obj

, : countobj count

<tbody ng-init="countObj={'count':result.data1.length}" >
         <tr ng-repeat="data in result.data1" ng-init="index1 = $index"  ng-if='result.data1'>
            <td>{{index1+1}}</td> // here I assing index1 to parent scope count
            <td>{{data}}{{index1+1}}</td> // here count has the correct value
            <td>{{result.data2[$index]}}</td>                     
        </tr>
          <tr ng-repeat="data in result.data3" ng-init="index2 = $index" ng-if='result.data3'>
            <td>{{index2+countObj.count+1}}</td> // here I add count to index2
            <td>{{result.data3[$index]}}{{countObj.count}}</td> // here count has no value
            <td>{{result.data4[$index]}}</td>
        </tr>
</tbody>
+4

More articles:


All Articles