CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangularjs-bindings
user3362364
user3362364

Reputation: 477

ng-repeat not showing the one of the listings

The network captures all the 4 listings in the database. However, it doesn't capture one of the listings on the right side. I can't figure out why only 1 of them is being ignored.

Here's the html code:

    <div class="row" ng-repeat="company in companies" ng-show="companies.indexOf(company) > 0 && companies.indexOf(company) % 2 == 1">
            <!-- Company 1 Starts Here -->
            <div class="col-md-6 col-sm-6 col-xs-12 companies-leftPadding">
                <div class="leftbar topgap">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12 ">
                            <div class="pull-right" style="position: absolute;top: 20px;right: 20px;">
                                <span class="cursor companies-follow-button">Follow</span>
                            </div>
                                <img ng-src="{{company.cover_picture_324_150}}" class="companies-card-frontpage img-responsive companies-frontpage" alt="{{company.company_name}}">
                            <div class="companies-description text-center halfPadding">
                                &nbsp;
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="text-center" style="margin-top: -50px;">
                                <a class="cursor" ui-sref="app.companydetails({company_slug : company.slug})">
                                    <img class="companies-card-logo" ng-src="{{company.company_logo_168_168}}">
                                    <h4 class="font-weight-600 companies-card-name">{{company.company_name}}</h4>
                                </a>
                                    <div class="font-weight-300 companies-card-type">
                                        {{company.category[0].category}} | {{company.locations[0].cities}}
                                    </div>
                            </div>
                        </div>
                    </div>
                    <div class="fullPadding">
                        <div class="row companies-card-header-main" >
                            <div class="col-md-6 col-sm-6 col-xs-6 companies-header-left">
                                <small>Happiness Index</small>
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-6 companies-header-right">
                                <small>Followers: {{company.followers_count}}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Company 2 Starts Here -->
            <div class="col-md-6 col-sm-6 col-xs-12 companies-rightPadding">
                <div class="leftbar topgap">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12 ">
                            <div class="pull-right" style="position: absolute;top: 20px;right: 20px;">
                                <span class="cursor companies-follow-button">Follow</span>
                            </div>
                            <img ng-src="{{companies[companies.indexOf(company)+1].cover_picture_324_150}}" class="companies-card-frontpage img-responsive companies-frontpage" alt="">
                            <div class="companies-description text-center halfPadding">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="text-center" style="margin-top: -50px;">
                                <a ui-sref="app.companydetails({company_slug : companies[company.indexOf(company)+1].slug})">
                                    <img class="companies-card-logo" ng-src="{{companies[companies.indexOf(company)+1].company_logo_168_168}}">
                                    <h4 class="font-weight-600 companies-card-name">{{companies[companies.indexOf(company)+1].company_name | characters:25 }}</h4>

                                    <div class="font-weight-300 companies-card-type">{{companies[companies.indexOf(company)+1].category[0].category}} | {{companies[companies.indexOf(company)+1].locations[0].cities}}</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="fullPadding">
                        <div class="row companies-card-header-main" >
                            <div class="col-md-6 col-sm-6 col-xs-6 companies-header-left">
                                <small>Happiness Index:</small>
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-6 companies-header-right">
                                <small>Followers: {{companies[companies.indexOf(company)+1].followers_count}}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

This is the output for 4 listings. See the last listing has no data binded. I can't figure out why:

    <div class="row ng-scope ng-hide" ng-repeat="company in companies" ng-show="companies.indexOf(company) > 0 &amp;&amp; companies.indexOf(company) % 2 == 1">
            <!-- Company 1 Starts Here -->
            <div class="col-md-6 col-sm-6 col-xs-12 companies-leftPadding">
                <div class="leftbar topgap">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12 ">
                            <div class="pull-right" style="position: absolute;top: 20px;right: 20px;">
                                <span class="cursor companies-follow-button">Follow</span>
                            </div>
                                <img ng-src="http://53.71.21.XX/apis/media/company_cover_picture/cover_picture_324_150/internship-FULL-VIEW_AU5JaHB.jpg" class="companies-card-frontpage img-responsive companies-frontpage" alt="flip_company_7" src="http://53.71.21.XX/apis/media/company_cover_picture/cover_picture_324_150/internship-FULL-VIEW_AU5JaHB.jpg">
                            <div class="companies-description text-center halfPadding">
                                &nbsp;
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="text-center" style="margin-top: -50px;">
                                <a class="cursor" ui-sref="app.companydetails({company_slug : company.slug})" href="/company/flip_company_7">
                                    <img class="companies-card-logo" ng-src="http://53.71.21.XX/apis/media/company_logo/company_logo_168_168/User-Reputation_l1I1tXQ.jpg" src="http://53.71.21.XX/apis/media/company_logo/company_logo_168_168/User-Reputation_l1I1tXQ.jpg">
                                    <h4 class="font-weight-600 companies-card-name ng-binding">flip_company_7</h4>
                                </a>
                                    <div class="font-weight-300 companies-card-type ng-binding">
                                        Advertising and Agencies | Toronto
                                    </div>
                            </div>
                        </div>
                    </div>
                    <div class="fullPadding">
                        <div class="row companies-card-header-main">
                            <div class="col-md-6 col-sm-6 col-xs-6 companies-header-left">
                                <small>Happiness Index</small>
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-6 companies-header-right">
                                <small class="ng-binding">Followers: 0</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Company 2 Starts Here -->
            <div class="col-md-6 col-sm-6 col-xs-12 companies-rightPadding">
                <div class="leftbar topgap">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12 ">
                            <div class="pull-right" style="position: absolute;top: 20px;right: 20px;">
                                <span class="cursor companies-follow-button">Follow</span>
                            </div>
                            <img ng-src="http://53.71.21.XX/apis/media/company_cover_picture/cover_picture_324_150/internship-FULL-VIEW_NXJtjVx.jpg" class="companies-card-frontpage img-responsive companies-frontpage" alt="" src="http://53.71.21.XX/apis/media/company_cover_picture/cover_picture_324_150/internship-FULL-VIEW_NXJtjVx.jpg">
                            <div class="companies-description text-center halfPadding">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="text-center" style="margin-top: -50px;">
                                <a ui-sref="app.companydetails({company_slug : companies[company.indexOf(company)+1].slug})" href="/company/flip_company_14">
                                    <img class="companies-card-logo" ng-src="http://53.71.21.XX/apis/media/company_logo/company_logo_168_168/User-Reputation_ja4z99I.jpg" src="http://53.71.21.XX/apis/media/company_logo/company_logo_168_168/User-Reputation_ja4z99I.jpg">
                                    <h4 class="font-weight-600 companies-card-name ng-binding">flip_company_6</h4>

                                    <div class="font-weight-300 companies-card-type ng-binding">Advertising and Agencies | Toronto</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="fullPadding">
                        <div class="row companies-card-header-main">
                            <div class="col-md-6 col-sm-6 col-xs-6 companies-header-left">
                                <small>Happiness Index:</small>
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-6 companies-header-right">
                                <small class="ng-binding">Followers: 0</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row ng-scope" ng-repeat="company in companies" ng-show="companies.indexOf(company) > 0 &amp;&amp; companies.indexOf(company) % 2 == 1">
            <!-- Company 1 Starts Here -->
            <div class="col-md-6 col-sm-6 col-xs-12 companies-leftPadding">
                <div class="leftbar topgap">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12 ">
                            <div class="pull-right" style="position: absolute;top: 20px;right: 20px;">
                                <span class="cursor companies-follow-button">Follow</span>
                            </div>
                                <img ng-src="http://53.71.21.XX/apis/media/company_cover_picture/cover_picture_324_150/internship-FULL-VIEW_NXJtjVx.jpg" class="companies-card-frontpage img-responsive companies-frontpage" alt="flip_company_6" src="http://53.71.21.XX/apis/media/company_cover_picture/cover_picture_324_150/internship-FULL-VIEW_NXJtjVx.jpg">
                            <div class="companies-description text-center halfPadding">
                                &nbsp;
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="text-center" style="margin-top: -50px;">
                                <a class="cursor" ui-sref="app.companydetails({company_slug : company.slug})" href="/company/flip_company_6">
                                    <img class="companies-card-logo" ng-src="http://53.71.21.XX/apis/media/company_logo/company_logo_168_168/User-Reputation_ja4z99I.jpg" src="http://53.71.21.XX/apis/media/company_logo/company_logo_168_168/User-Reputation_ja4z99I.jpg">
                                    <h4 class="font-weight-600 companies-card-name ng-binding">flip_company_6</h4>
                                </a>
                                    <div class="font-weight-300 companies-card-type ng-binding">
                                        Advertising and Agencies | Toronto
                                    </div>
                            </div>
                        </div>
                    </div>
                    <div class="fullPadding">
                        <div class="row companies-card-header-main">
                            <div class="col-md-6 col-sm-6 col-xs-6 companies-header-left">
                                <small>Happiness Index</small>
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-6 companies-header-right">
                                <small class="ng-binding">Followers: 0</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Company 2 Starts Here -->
            <div class="col-md-6 col-sm-6 col-xs-12 companies-rightPadding">
                <div class="leftbar topgap">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12 ">
                            <div class="pull-right" style="position: absolute;top: 20px;right: 20px;">
                                <span class="cursor companies-follow-button">Follow</span>
                            </div>
                            <img class="companies-card-frontpage img-responsive companies-frontpage" alt="">
                            <div class="companies-description text-center halfPadding">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="text-center" style="margin-top: -50px;">
                                <a ui-sref="app.companydetails({company_slug : companies[company.indexOf(company)+1].slug})" href="/company/flip_company_14">
                                    <img class="companies-card-logo">
                                    <h4 class="font-weight-600 companies-card-name ng-binding"></h4>

                                    <div class="font-weight-300 companies-card-type ng-binding"> | </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="fullPadding">
                        <div class="row companies-card-header-main">
                            <div class="col-md-6 col-sm-6 col-xs-6 companies-header-left">
                                <small>Happiness Index:</small>
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-6 companies-header-right">
                                <small class="ng-binding">Followers: </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Upvotes: 0

Views: 55

Answers (1)

Mathias F
Mathias F

Reputation: 15931

Check with {{companies.indexOf(company)+1}} after <!-- Company 2 Starts Here --> if the the index is what you expected.

EDIT

Change line 

 <!-- Company 2 Starts Here -->

to <!-- Company 2 Starts Here -->{{companies.indexOf(company)+1}}

And check what the resultinh html is.

Upvotes: 0

Related Questions