ng-repeat not displaying data or repeating in Angular

Question

I am new to Angular and I am trying to build a search page, I have a button that executes a function to get data from the server when it is clicked. The data is returned to the client, now I want to be able to display the data on that same page.

I've tried something but it does not show. What am I doing wrong?

This is my html:

<div class="search-area col-md-12  no-padding" ng-controller="SearchController as search">

                <div class="col-md-3">
                    <!-- Select Basic -->
                    <div class="form-group">
                        <div class="col-md-12">
                            <select id="From" name="From" ng-model="d.from" class="form-control"
                                ng-options="item.id as item.dest_name for item in d.destinations">
                        </select>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <!-- Select Basic -->
                    <div class="form-group">
                        <div class="col-md-12">
                            <select id="To" name="To" ng-model="d.to" class="form-control"
                                ng-options="item.id as item.dest_name for item in d.destinations">
                        </select>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <div class="col-md-12">
                            <input id="When" name="When" ng-model="d.when" placeholder="When" class="form-control input-md"   required=""  data-provide="datepicker" data-date-format="mm/dd/yyyy">
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <a ng-click="getSchedules()" class="submit">Buy Ticket</a>
                </div>

            </div>

            <div class="clear"></div>

            <div class="col-md-12" ng-repeat="schedule in d.schedules">
                <div class="form-group">
                    <div class="col-md-12" ng-show="schedule.length">
                        <% schedule.transport_entity %>
                    </div>
                </div>
            </div>

search.js

(function() {
    var app = angular.module('search', []);

    app.controller('SearchController', ['$http', '$scope', function($http, $scope) {
        var search = this;
        this.destinations = [];
        $scope.d = {};

        $scope.getSchedules = function() {

            $http.get('/trips/schedules?from='+$scope.d.from+'&to='+$scope.d.to+'&when='+$scope.d.when).success(function(data) {
                $scope.d.schedules = data; // Getting The Search Results Here
            });
        };

        $http.get('/trips/destinations').success(function(data) {
            $scope.d.destinations = data;
        });
    }]);

}) ();

Rodrigo Taboada · Accepted Answer · 2015-03-07 16:22:41Z

1

Store your data in the $scope rather than in properties of the controller itself. Also you can simplify your logic considerably by making proper use of data binding - if you set an ng-model on the form controls and use ng-options for the select boxes then you don't need any of the jQuery logic to extract values from the fields and generate the option elements - angular will do it all for you.

<div class="search-area col-md-12  no-padding" ng-controller="SearchController as search">

    <div class="col-md-3">
        <!-- Select Basic -->
        <div class="form-group">
            <div class="col-md-12">
                <select id="From" name="From" ng-model="data.from" class="form-control" ng-options="item.id as item.dest_name for item in data.destinations">
                </select>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <!-- Select Basic -->
        <div class="form-group">
            <div class="col-md-12">
                <select id="To" name="To" ng-model="data.to" class="form-control" ng-options="item.id as item.dest_name for item in data.destinations">
                </select>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="form-group">
            <div class="col-md-12">
                <input id="When" name="When" ng-model="data.when" placeholder="When" class="form-control input-md" required="" data-provide="datepicker" data-date-format="mm/dd/yyyy">
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <a ng-click="getSchedules()" class="submit">Buy Ticket</a>
    </div>

</div>

<div class="clear"></div>

<div class="col-md-12" ng-repeat="schedule in data.schedules">
    <div class="form-group">
        <div class="col-md-12" ng-show="schedule.length">
            <% schedule.transport_entity %>
        </div>
    </div>
</div>

search.js

(function() {
    var app = angular.module('search', []);

    app.controller('SearchController', ['$http', '$scope' function($http, $scope) {
        $scope.data = {};

        $scope.getSchedules = function() {    
            $http.get('/trips/schedules?from='+$scope.data.from+'&to='+$scope.data.to+'&when='+$scope.data.when)
            .success(function(data) {
                $scope.data.schedules = data; // Getting The Search Results Here
            });
        };

        $http.get('/trips/destinations').success(function(data) {
            $scope.data.destinations = data;
        });
    }]);

}) ();

edited Mar 7, 2015 at 16:22

Rodrigo Taboada

2,7054 gold badges27 silver badges27 bronze badges

answered Mar 7, 2015 at 12:20

Ian Roberts

123k17 gold badges177 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user3718908x100 Over a year ago

TypeError: this.__FireQueryShared is undefined .data/<()jquery.js (line 3) .access()jquery.js (line 3) .data()jquery.js (line 3) e.fn.data()jquery-....1.1.js (line 2) $AnimateProvider</this.$get</<.setClass()angular.js (line 4794) NgModelController</this.$setTouched()angular.js (line 22896) $RootScopeProvider/this.$get</Scope.prototype.$eval()angular.js (line 14401) $RootScopeProvider/this.$get</Scope.prototype.$apply()angular.js (line 14500) ngModelPostLink/<()angular.js (line 23516) b.event.dispatch()jquery.js (line 3) b.event.add/v.handle()

user3718908x100 Over a year ago

That is the error i get when i do it like you suggested.

Ian Roberts Over a year ago

@user3718908 hmm, maybe "data" wasn't the best choice for the scope property name, what about if you change it to something else like d instead of data?

user3718908x100 Over a year ago

still get the same error, also to,from and when in the $http.get are all undefined.

user3718908x100 Over a year ago

Okay concerning that error i googled it and apparently it is a bug caused by FireQuery with the latest version of firebug.

|

christopher · Accepted Answer · 2015-03-07 12:03:11Z

0

You need to add it to the scope.

$scope.search = this;

And when storing the results of the search..

$scope.search.schedules = data;

Then it will be available in the view.

answered Mar 7, 2015 at 12:03

christopher

27.4k6 gold badges58 silver badges90 bronze badges

Collectives™ on Stack Overflow

ng-repeat not displaying data or repeating in Angular

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related