Question

我目前正在创建一个餐馆应用程序，我被困在这个问题上。我从DB获得了一个餐馆列表，然后使用ng-repeat在视图中显示它们。我用卡片显示它们，每张卡片上有2个链接：一个用于获取有关餐厅的更多信息，另一个用于获取它的菜单。问题出在这里：我想使用访问链接来调用视图，并显示链接所在卡片上显示的特定餐厅的信息，以及所有信息。我希望该视图作为模板，以便它只是在特定的调用中加载特定的餐馆，包含所有信息。请有人帮帮我吗？

Answer 1

以下是显示餐馆列表的代码：

    <ion-view view-title="RESTAURANTS A LA LISTE" class="plan">
   <ion-nav-buttons side="left">
    <button class="button button-icon icon button-clear ion-android-restaurant" ng-click="openModal()"></button>
  </ion-nav-buttons>
  <ion-content>
  <h3 class="assertive">{{error}}</h3>
  <div ng-repeat="record in records"
    <div class="list card" id="contenu">

  <div class="item item-avatar">
    <img ng-src="{{record.logo}}">
    <h2>{{record.name}}</h2>
    <p class="assertive">{{record.devise}}</p>
  </div>

  <div class="item item-body">
    <img class="full-image" ng-src="{{record.photoune}}">
    <p>
      {{record.description}}
    </p>
    <p>
      <button class="button button-clear button-assertive subdued" ng-click="visite()">*Visiter</button>
      <button class="button button-clear button-assertive subdued">*Menu</a>
    </p>
  </div>

</div>
</div>
  </ion-content>
</ion-view>

以下是显示餐厅详情的代码：

    <ion-view view-title="{{record.name}}" class="plan">
  <ion-nav-buttons side="left">
    <button class="button button-icon icon button-clear ion-android-restaurant" ng-click="openModal()"></button>
  </ion-nav-buttons>
  <ion-content>
  <div>
    <img src="{{record.photoune}}" class="headimg">
  </div>
  </ion-content>
</ion-view>

最后这里是餐馆列表控制器：

    .controller('listeCtrl', function($scope, Restaurants, $location){
  Restaurants.getRestaurants().then(function(restaurants){

        console.log("Restaurants: ", restaurants);
        console.log(restaurants.data);

        $scope.records =  restaurants.data.datas;
        $scope.visite = function(){
          $location.path('/visiteResto');
        };

      },function(error){
      console.log("Could not get location");
      $scope.error = "Desole, une erreur de connexion s'est produite!";
    }); 
})

我使用.factory和php api从db中获取数据。这是从餐馆获得信息的工厂：

    .factory('Restaurants', function($http){
  var restaurants = [];
  return {
    getRestaurants: function(){
      return $http.get("http://192.168.8.101:80/feed.php").then(function(response){
          restaurants = response;
          return restaurants;
      });
    }
  }
})

如何根据调用它的元素加载离子视图？

1 个答案: