AngularJS : why ngrepeat not working properly not display data?

Question

I am making a simple demo of nested ng-repeat with some condition.it is not printing any values why ? Actually I am trying to get below result after iteration of two objects

Expected result

ght        nor

abc        pqr

code pen or plunker

\

<ion-scroll scrollbar-y="true">
                    <div class="row rowclass" ng-repeat="column in a ">
                        <div class="col brd text-center collapse-sm columnCss" ng-repeat="field in column.columns" ng-show="b[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
                    </div>
                </ion-scroll>

Actually I have two object ..having one key inside I need to show those value which is equal .but i am not getting expected result why ?

Answer 1

You need to update

ng-show="b[$index].fieldNameOrPath===field.fieldNameOrPath"

to

ng-show="b[$index-1].fieldNameOrPath===field.fieldNameOrPath"

And in your json, fieldNameOrPath property is different in a and b like in a it is "Sub" and in b it is "Subject", so either update a or b, so that property fieldNameOrPath is same at both the places.

Answer 2

Here is the answer with example. Also in script.js file i have corrected some type mistakes.

ng-show="b[$index-1].fieldNameOrPath===field.fieldNameOrPath"

Answer 3

While it is technically possible to do this with your current data set, I'd very much recommend changing your data model to look something like this:

$scope.dataRows = [
  {
    ID: "00TK000000INaMXMA1",
    Subject: "ght",
    Priority: "normal"
  },
  {
    ID: "00TKabc",
    Subject: "abc",
    Priority: "pqr"
  }
];

And your HTML to something like this:

<ion-scroll scrollbar-y="true">
  <div class="row rowclass" ng-repeat="row in dataRows">
    <div class="col brd text-center collapse-sm columnCss">
      {{row.Subject}}
    </div>
    <div class="col brd text-center collapse-sm columnCss">
      {{row.Priority}}
    </div>
  </div>
</ion-scroll>

However, if for some reason this just isn't possible (data feed from some other place etc), then here is how I fixed your table issues:

1 : your fieldNameOrPath attributes didn't match (one was "Pri" and "Sub" and the other was "Priority" and "Subject").

2: You will need to add another ng-repeat unfortunately. Your indexes don't line up correctly because you have 3 fields in your data and 2 in your data columns. I've made a Plnkr fork for you that solves your problem (minus some css styling stuff) but I'd only recommend using it if you cannot change your data model.

http://plnkr.co/edit/3K3zKenGHG4hARkXmUTp?p=preview