我的角度视图没有显示我的数据

时间:2016-04-04 07:56:38

标签: javascript angularjs node.js express sails.js

    <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>

上面是我的角度视图的代码。它旨在显示我执行的搜索结果。我知道我得到了我的结果,因为我正在记录它,但我的观点并没有显示这些结果。我是棱角分明的新手并用这个来学习,所以我不确定是什么问题。

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);
        });
    }

  }
]);

上面是我的controller.i的代码。我首先使用get请求尝试获取数据,但由于我传递了一个搜索参数,get请求对我不起作用。所以我正在使用一个帖子发布参数并获取响应。我正在使用sails框架。

我有2个不同的单选按钮,根据选择的无线电显示不同的div。我知道这很有效,因为下面的代码呈现了应有的方式。

  <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>

3 个答案:

答案 0 :(得分:0)

检查ng-show ="formMode == 'HotelSearch'"并确保表达式返回true!只有这可能是问题!

或者在没有ng-show="true"的情况下尝试。 请参阅plunker

答案 1 :(得分:0)

似乎问题是我正在嵌套我的控制器,删除嵌套使它现在正常工作。

答案 2 :(得分:0)

我认为您的问题是您收到的回复后数据。 您应该确保response.data是一个数组而不是一个对象。

以下是a working fiddle,其中数据是在$http.get请求后手动添加的。所以,绑定没问题。

您可以使用回复的console.log更新您的问题吗?和/或控制台的打印屏幕(有时控制台可以以棘手的方式显示数据)。

另外,我建议您在检索数据时使用$http.get代替$http.post。并相应地更改您的服务器API。 Here您有更多详情。