如何在此JSON数据上使用ng-repeat

时间:2017-03-15 07:16:12

标签: angularjs

我正在尝试使用ng-repeat调用 hotel_name 。我该怎么做。

这是代码。但没有任何东西被展示出来。

<div ng-repeat="x in hotels">
    <p ng-repeat="y in x.data">{{y.hotel_name}}</p>
</div>

这是数据格式。

{
status: 200,
message: "Packages Found",
data: [
  {
    hotel_id: "40",
    company_id: "2",
    user_id: "17",
    hotel_name: "Zen International",
    hotel_description: "Good Hotel"
  }
]
}

3 个答案:

答案 0 :(得分:2)

您的hotels似乎是一个对象。你不需要迭代它。

转换此

<div ng-repeat="x in hotels">
    <p ng-repeat="y in x.data">{{y.hotel_name}}</p>
</div>

到这个

<div>
    <p ng-repeat="y in hotels.data">{{y.hotel_name}}</p>
</div>

答案 1 :(得分:2)

你可以给我们一个ng-repeat

<div>
    <p ng-repeat="y in hotels.data">{{y.hotel_name}}</p>
</div>

<强>样本

&#13;
&#13;
var demoApp = angular.module('demoApp', []);
 var controllers = {};
 controllers.SimpleController = function ($scope) {
  $scope.hotels = {
status: 200,
message: "Packages Found",
data: [
  {
    hotel_id: "40",
    company_id: "2",
    user_id: "17",
    hotel_name: "Zen International",
    hotel_description: "Good Hotel"
  }
]
};
};
demoApp.controller(controllers);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="SimpleController">
 <div>
    <p ng-repeat="y in hotels.data">{{y.hotel_name}}</p>
</div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

在控制器中绑定带有$ scope的Datalist,如

    angular.module('YourApp', [])
.controller('YourCtrl', function($scope) {

    $scope.dataList={
    status: 200,
    message: "Packages Found",
    data: [
      {
        hotel_id: "40",
        company_id: "2",
        user_id: "17",
        hotel_name: "Zen International",
        hotel_description: "Good Hotel"
      }
    ]
    }    

});

并将dataList与视图绑定,如

<div ng-app="YourApp" ng-controller="YourCtrl">
    <div>
        <p ng-repeat="item in dataList.data">{{item.hotel_name}}</p>
    </div>
</div>