CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Jason
Jason

Reputation: 1141

Angular struggling with ng-repeat

I am having some issues with ng-repeat when I only have one item.

here is some partial code in my controller:

Data.get('company').then(function(data){
        $scope.subDomains = data;
    });

here is my html before the code is run:

<div id="subdomains">
    <ul>
        <li style="margin: 5px;" ng-repeat="sub in subDomains">{{sub.subdomain}} : <button type="button" class="btn btn-mav" ng-click="removeAccount(sub.subdomain);">Remove</button></li>
    </ul>
</div>

here is my html after the code is run: (notice only one li has a subdomain) thus I only want to show one li

<div id="subdomains">
<ul>
<!-- ngRepeat: sub in subDomains -->

<li style="margin: 5px;" ng-repeat="sub in subDomains" class="ng-binding ng-scope"> : <button type="button" class="btn btn-mav" ng-click="removeAccount(sub.subdomain);">Remove</button></li>
<!-- end ngRepeat: sub in subDomains -->

<li style="margin: 5px;" ng-repeat="sub in subDomains" class="ng-binding ng-scope">jason : <button type="button" class="btn btn-mav" ng-click="removeAccount(sub.subdomain);">Remove</button></li>
<!-- end ngRepeat: sub in subDomains -->

<li style="margin: 5px;" ng-repeat="sub in subDomains" class="ng-binding ng-scope"> : <button type="button" class="btn btn-mav" ng-click="removeAccount(sub.subdomain);">Remove</button></li>
<!-- end ngRepeat: sub in subDomains -->

<li style="margin: 5px;" ng-repeat="sub in subDomains" class="ng-binding ng-scope"> : <button type="button" class="btn btn-mav" ng-click="removeAccount(sub.subdomain);">Remove</button></li>
<!-- end ngRepeat: sub in subDomains -->

<li style="margin: 5px;" ng-repeat="sub in subDomains" class="ng-binding ng-scope"> : <button type="button" class="btn btn-mav" ng-click="removeAccount(sub.subdomain);">Remove</button></li>
<!-- end ngRepeat: sub in subDomains -->
</ul>
</div>

here is the console log:

Object {apiversion: "2", data: Object, event: Object, func: "listsubdomains", module: "SubDomain"}
    apiversion:"2"
    data:Object
      basedir:"public_html"
      dir:"/home/XXXXX/public_html"
      domain:"jason.XXXXX.com"
      domainkey:"jason_XXXXX.com"
      reldir:"home:public_html"
      rootdomain:"XXXXX.com"
      status:"not redirected"
      subdomain:"jason"

I am trying to list only the subdomains. When I have more than one it works perfectly but if I only have one I get the results I posted.

Upvotes: 2

Views: 82

Answers (2)

Simon Sch&#252;pbach
Simon Sch&#252;pbach

Reputation: 2683

If you use ng-repat="sub in subDomains" and subDomains is an object, then you will have one repeat for every object member. Be sure that your subDomains is always an array, even if just one or none items exists.

Upvotes: 2

Jahirul Islam Bhuiyan
Jahirul Islam Bhuiyan

Reputation: 799

try following 

Data.get('company').then(function(data){
    if(angular.isArray(data))
        $scope.subDomains = data;
    else
        $scope.subDomains = [data];

});

hope this help

Upvotes: 1

Related Questions