2
    <div ng-show ="formMode == 'HotelSearch'" id="hotelResults" ng-controller="hotelSearchCtrl">

      <div class="row" ng-repeat="hotel in hotels">

        <div class="col-md-6 col-lg-4 col-sm-12">

          <div class="card">
            <div class="front">
              <div class="cover">
                <img src="images/city.jpg" class="img-responsive"/>
              </div>
              <div class="content">
                <div class="main">
                  <h3 class="name">{{hotel.name}}</h3>
                  <h5><i class="fa fa-map-marker fa-fw text-muted"></i> {{hotel.location}}</h5>
                  <h5><i class="fa fa-building-o fa-fw text-muted"></i> {{hotel.phone}}</h5>
                  <h5><i class="fa fa-envelope-o fa-fw text-muted"></i> {{hotel.email}}</h5>
                </div>
                <div class="footer">
                </div>
              </div>
            </div> <!-- end front panel -->
          </div>
          <!-- end card -->
        </div>

      </div>
   </div>

Above is the code for my angular view. It is meant to show the results of a search i perform. I know i am getting my results back because i am logging it, but my view is not displaying these results.i'm new to angular and using this to learn, so i'm not really sure what the issue is.

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

    $scope.hotelSearch = function ()
    {
      $http.post('/getonehotel',
        {
          name:$scope.hotelName
        }).
      then(
        function onSuccess(response)
        {
          $scope.hotels = response.data;
          console.log($scope.hotels);
        }).
      catch(
        function onError(err)
        {
          toastr.error('An error has occured, please try again later', 'Error', { closeButton: true});
          console.log(err);
        });
    }

  }
]);

Above is the code for my controller.i first used a get request to try and get the data, but since i'm passing a search parameter the get request wasn't working for me.so i'm using a post to post the parameter and get back the response. I am using the sails framework.

I have 2 different radio buttons to show different divs depending on which radio is selected. I know this works because the code below renders the way it should.

  <div class="container" id="results">

    <div ng-show ="formMode == 'HotelSearch'" id="hotelResults" ng-controller="hotelSearchCtrl">
            <h2>hotels</h2>
      </div>



    <div ng-show ="formMode == 'FlightSearch'" id="flightResults">
          <h2>Flight</h2>
    </div>

  </div>
lagfvu
  • 597
  • 6
  • 21
  • The URL (`/getonehotel`) sounds like it returns one hotel, not a collection of hotels. But your template iterates over multiple hotels so maybe try assigning an array to `$scope.hotels`: `$scope.hotels = [response.data];`. Also check your console for any errors. – Raphael Schweikert Apr 04 '16 at 08:01
  • is your event working properly? – uzaif Apr 04 '16 at 08:02
  • @uzaif yes, the event is working properly. I have no errors in my console and i am getting the data in my console. it just isn't showing up in the view – lagfvu Apr 04 '16 at 08:08
  • @RaphaelSchweikert the problem with that is the query can return either one or multiple objects in the response. that's why i did it that way. is there a bette way to go about it? – lagfvu Apr 04 '16 at 08:09
  • what console.log will give you? – uzaif Apr 04 '16 at 08:11
  • @lagfvu Then use `$scope.hotels = Array.isArray(response.data) ? response.data : [response.data]`. And I’d say it’s bad practice for a REST call to be able to return different formats. Either always return an array or never do. If you have clearly-defined cases where the result is always only one item, use a different call (`getonehotel` vs `gethotels` or something like that). – Raphael Schweikert Apr 04 '16 at 08:16
  • @uzaif console.log gives me an array containing my data as objects – lagfvu Apr 04 '16 at 08:19
  • @lagfvu Can you check in the DOM inspector whether the outer `
    ` is even displayed? Maybe the condition on the `ng-show` does not hold…
     – Raphael Schweikert Apr 04 '16 at 08:20
  • 1
    @lagfvu what is this `ng-show ="formMode == 'HotelSearch'"` for? remove this and try – war1oc Apr 04 '16 at 08:21
  • why you not use ng-show? what is formMode? – uzaif Apr 04 '16 at 08:23
  • why do you do a `POST` on what seems like a `GET` request : '/getonehotel' ? you should pass a parameter in the query : `/getonehotel?searchParameter=<...>` – Lulylulu Apr 04 '16 at 08:24
  • ya @Lulylulu it also posible – uzaif Apr 04 '16 at 08:26
  • @Lulylulu so i just add my $scope.name into the searchParamter tag? – lagfvu Apr 04 '16 at 08:30
  • @RaphaelSchweikert ,the ng-show isn't the problem. i already checked that out and it shows static data and works the way it's meant to. the outer div shows up. it's the data from the angular controller that doesn't show up – lagfvu Apr 04 '16 at 08:31
  • @lagfvu : could you add the response data format in your question (an example of json) ? and also [here](http://stackoverflow.com/questions/13760070/angularjs-passing-data-to-http-get-request) you have the details of how using get with parameters :) – Lulylulu Apr 04 '16 at 09:06
  • You will need `formMode` declared on `$scope`. If you set `$scope.formMode = 'HotelSearch'` then only this `div` is gonna be rendered. – AdityaParab Apr 04 '16 at 09:17

3 Answers3

0

check ng-show ="formMode == 'HotelSearch'" and make sure the expression returns true! Only that may be problem!

Or try it without ng-show="true". see the plunker

vkstack
  • 1,582
  • 11
  • 24
  • the ng-show works the way its meant to work. it shows the appropriate section when it should. So i don't think thats the problem. i basically have 2 radio buttons that each show a different
    when selected. and it works.
     – lagfvu Apr 04 '16 at 10:01
  • that's what i used to design it. The problem seems to be the ng-repeat – lagfvu Apr 04 '16 at 10:16
0

It seems the problem was that i was nesting my controllers, removing the nesting makes it work properly now.

lagfvu
  • 597
  • 6
  • 21
0

I think your problem is the post response data you receive. You should make sure that response.data is an array and not an object.

Here is a working fiddle where the data is manually added after a $http.get request. So, the bindings are ok.

Could you update your question with the console.log of your response ? and/or an printscreen of the console (sometimes the console can show data in a tricky way).

Also, I reccommend you to use $http.get instead of $http.post when retrieving data. And change your server API accordingly. Here you have some more details.

Community
  • 1
  • 1
Lulylulu
  • 1,254
  • 8
  • 17