我的angular度视图不显示我的数据
<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>
以上是我angular度视图的代码。 这是为了显示我执行的search结果。 我知道我得到我的结果回来,因为我logging它,但我的看法是不显示这些results.i'm新的angular度和使用这个学习,所以我不知道是什么问题。
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第一次使用获取请求尝试获取数据的代码,但由于我传递一个search参数获取请求不适合我。因此,我使用的职位后张贴参数并获取响应。 我正在使用sails框架。
我有两个不同的单选button来显示不同的div取决于select哪个收音机。 我知道这是有效的,因为下面的代码呈现应该的方式。
<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>
check ng-show ="formMode == 'HotelSearch'"
并确保expression式返回true! 只有这可能是问题!
或者试试没有ng-show="true"
。 看到那个笨蛋
看来问题是我嵌套我的控制器,删除嵌套现在正常工作。
我认为你的问题是你收到的post回复数据。 你应该确保response.data
是一个数组而不是一个对象。
这里是一个工作小提琴在$http.get
请求后手动添加数据。 所以,绑定是可以的。
你能用你的回应的console.log
更新你的问题吗? 和/或控制台的打印屏幕(有时控制台可以以一种棘手的方式显示数据)。
另外,我build议您在检索数据时使用$http.get
而不是$http.post
。 并相应地更改您的服务器API。 在这里你有更多的细节。