0

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; }); }]); }) ();
Improve this question

2 Answers 2

Reset to default
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; }); }]); }) ();
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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()
That is the error i get when i do it like you suggested.
@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?
still get the same error, also to,from and when in the $http.get are all undefined.
Okay concerning that error i googled it and apparently it is a bug caused by FireQuery with the latest version of firebug.
|
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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.