AngularJs binding issues with inner JSON object #15744

[imzubair10]

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Trying to bind json object to the html elements in a webpage. Json returned objects have inner objects as well which is sometimes null as well. If crtain property is null then i still need to show div but with some hard coded values which i am trying to do with ng-if. But it does'nt work for me whereever i use ng-if these are binding from the returned inner employeeList object. Please suggest if two ng-repeats will be used here and ng-if is applicable here??

Expected behavior

The expected result should be to show all the html elements if certain property is absent from the inner object then the else condition should be visible. (else condition here means ng-if where condition is (!=)).

HTML Code

<div class="container" ng-controller="profileController" ng-init="loadProfilesData()">
    <div ng-repeat="p in profileData">
		<div>{{p.company}}</div>
		<div>{{p.department}}</div>
		
		<div ng-repeat="emp in p"></div>
		
			<div ng-if="emp.Tag== 'Devo100'" gauge-chart class="gauge" id="Devo100-{{p.Id}}" value=p.Value*100></div>
			
			<div ng-if="emp.Tag== 'Devo101'" gauge-chart class="gauge" id="Devo101-{{p.Id}}" value=p.Value*100></div>
			
			<span ng-if="emp.Tag== 'Devo102'">
			   {{ p.Value | date: "hh:mm:ss" }}
			</span>
			
	    </div>
    </div>                
</div>

JSON

profileData: [  
  		      {
                 ID: "1",
                 employeeList: [{"Value":0.003,"Stat":{"parameter":0,"Name":"test0","Tag":"Devo100"}},
                               {"Value":0.004,"Stat":{"parameter":0,"Name":"test1","Tag":"Devo101"}},
                               {"Value":0.005,"Stat":{"parameter":0,"Name":"test2","Tag":"Devo102"}}],                  
                 comapny: "MSDFT",
                 department: "Sales"
                },
                {
                 ID: "2",
                 employeeList: null,                  
                 comapny: "MSDFT",
                 department: "HR"
                },
  			  {
                 ID: "3",
                 employeeList: [{"Value":0.003,"Stat":{"parameter":0,"Name":"test0","Tag":"Devo100"}},
                               {"Value":0.004,"Stat":{"parameter":0,"Name":"test1","Tag":"Devo101"}}],                  
                 comapny: "MSDFT",
                 department: "Development"
                },
  			  {
                 ID: "4",
                 employeeList: [{"Value":0.1,"Stat":{"parameter":0,"Name":"test2","Tag":"Devo102"}},
                               {"Value":0.25,"Stat":{"parameter":0,"Name":"test1","Tag":"Devo101"}}],                  
                 comapny: "MSDFT",
                 department: "Finance"
                },
  			  {
                 ID: "5",
                 employeeList: [{"Value":0.233,"Stat":{"parameter":0,"Name":"test0","Tag":"Devo100"}}],                  
                 comapny: "MSDFT",
                 department: "Accounts"
                }
  			]

What is the motivation / use case for changing the behavior?

It's a requirement

Please tell us about your environment:

Java with AngularJS.

• Angular version: 1.0.X

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  ES5
• Node (for AoT issues): node --version =

[frederikprijck]

This is not a bug, your code looks incorrect to me. By having a quick look, the following has to be changed:

<div ng-repeat="emp in p"></div>

This has to be changed to

<div ng-repeat="emp in p.employeeList"></div>

Next you need to put all elements with a binding on emp, inside the div above (and use === instead of ==):

<div ng-repeat="emp in p.employeeList">
   <div ng-if="emp.Tag === 'Devo100'">Tag was Devo100</div>
</div>

This doesn't look like a bug, but a general support question.

Please keep in mind that Github issues are reserved for bugs and feature requests.
For general support questions, feel free to ask for help in any of the channels mentioned here.

[Narretz]

Thanks @frederikprijck for answering this!

[imzubair10]

So Can't it be done with one ng-repeat??

[frederikprijck]

@imzubair10 No, your second ng-repeat is incorrect and should be changed as mentioned above.

[imzubair10]

Thanks corrected now but problem is still same.

<div class="container" ng-controller="profileController" ng-init="loadProfilesData()">
    <div ng-repeat="p in profileData">
		<div>{{p.company}}</div>
		<div>{{p.department}}</div>
		
		<div ng-repeat="emp in p.employeeList"></div>
		
			<div ng-if="emp.Tag== 'Devo100'" gauge-chart class="gauge" id="Devo100-{{p.Id}}" value=p.Value*100></div>
			<div ng-if="emp.Tag!= 'Devo100'" gauge-chart class="gauge" id="Devo100-{{p.Id}}" value=0></div>
			
			<span ng-if="emp.Tag== 'Devo102'">
			   {{ p.Value | date: "hh:mm:ss" }}
			</span>
			<span ng-if="emp.Tag== 'Devo102'">
			   0
			</span>			
	    </div>
    </div>                
</div>

There are couple of issues here i am facing.

What i wanted to do is
1-If employeeList is empty , then still div and span for else condition should be created
2- If any of the property is present for employeeList then still div and span must be created whichever is not present then create the else one.

Looks like if employeeList is empty then it does'nt go inside creating div and span which is understood. To address this is there a better way to do something like this.

and if condition does'nt work properly it displays both values so else is always present if (if) is true

[frederikprijck]

Hey @imzubair10, there's plenty of people who're willing to help you over at the channels mentioned at the bottom here.

Feel free to ping me over at gitter (https://gitter.im/angular/angular.js) with a reproduction sample (plunkr) and I'll be happy have a look.

[imzubair10]

@frederikprijck i've shared plunker on gitter (https://gitter.im/angular/angular.js)