Question

如何根据从json文件传递的id更改数据。 JSON：

{
  "hotels": [
  {
     "id" : 1,
     "name": "some hotel 1",
     "category" : [{
        "id" : 1,
        "hotel_id" : 1,
         "name"  : "Cat name 1",
         "bnb" : "yes",
         "simple" : "yes"
     }]
  },
   {
     "id" : 2,
     "name": "some hotel 2",
     "category" : [{
        "id" : 1,
        "hotel_id" : 2,
         "name"  : "Cat name 1",
         "bnb" : "yes",
         "simple" : "yes"
     }]
  }
  ]
}

在我的HTML中我有重复的重复：

<p>Hotel names</p>
    <ul>
        <li ng-repeat="hotel in list.hotels">

            {{hotel.name}}

            <ul class="thumbnails">
                <p>Category</p>
                <li ng-repeat="cat in hotel.category">
                    {{cat.name}}
                </li>
            </ul>
        </li>
    </ul>

所以这将显示我在json文件中的所有内容，并且我试图限制它只显示一个酒店的数据（我知道我可以用{{hotel[0].name}}之类的东西来做）但是必须有更好的方法，我也可以通过按下按钮将ID为1的酒店的数据显示在同一个div中的ID为2的酒店，反之亦然，我怎样才能使用某种开关？

谢谢。

Answer 1

您可以使用ng-repeat创建链接以根据点击显示酒店，如下面的演示或此fiddle中所示。

对于类别，您可以使用另一个ng-repeat（未在演示中添加）。

angular.module('demoApp', [])
	.controller('mainController', MainController);
  
function MainController() {
	
  this.hotels = [
  {
     "id" : 1,
     "name": "some hotel 1",
     "category" : [{
        "id" : 1,
        "hotel_id" : 1,
         "name"  : "Cat name 1",
         "bnb" : "yes",
         "simple" : "yes"
     }]
  },
   {
     "id" : 2,
     "name": "some hotel 2",
     "category" : [{
        "id" : 1,
        "hotel_id" : 2,
         "name"  : "Cat name 1",
         "bnb" : "yes",
         "simple" : "yes"
     }]
  }
  ];
	this.selectedHotel = this.hotels[0];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as mainCtrl">
  
  <a href="#" ng-repeat="hotel in mainCtrl.hotels" ng-click="mainCtrl.selectedHotel = hotel">{{hotel.name}}</a>
  
  <div>
    Hotel name: {{mainCtrl.selectedHotel.name}}
    Category: {{mainCtrl.selectedHotel.category}}
  </div>
</div>

Answer 2

要回答您的问题，请注意ng-if added

<p>Hotel names</p>
<ul>
    <li ng-repeat="hotel in list.hotels">

        {{hotel.name}}

        <ul class="thumbnails">
            <p>Category</p>
            <li ng-repeat="cat in hotel.categories" ng-if="cat.id == yourid">
                {{cat.name}}
            </li>
        </ul>
    </li>
</ul>

您可以使用当前控制器更改您的ID。正如其他人建议的那样，如果你只想显示一个元素，就不应该使用ng-repeat

AngularJS显示基于id的值

2 个答案: