单击时将数据传递到模态

New to angular. I am building an application where there is a meal card and you click on a button for a modal that has expanded information. I have a collapsible list of meals that each have a unique meal. When I click on the buttons only the first meal's data is displayed.

新角度。我正在构建一个应用程序,其中有一张餐卡,并且您单击按钮以获得已扩展信息的模式。我有一份可折叠的餐点清单,每餐都有独特的餐点。当我点击按钮时,只显示第一餐的数据。

I am wondering how can I bind the data of whatever meal I click to the modal? I have separated my views into two html files. Below is some code.

我想知道如何绑定我点击模式的任何一餐的数据?我已将我的观点分成两个html文件。下面是一些代码。

Individual meals view:

个人观食:

<ul class="collapsible popout" data-collapsible="accordion" watch ng-controller= "mealView">
  <li>
    <!-- Meals -->
    <ul class="collapsible" data-collapsible="accordion" ng-repeat = "meal in meals" >
      <li>
        <div class="collapsible-header">{{meal.name}}</div>
        <div class="collapsible-body">
          <div class= "row">
            <div class= "mealName col s4"> Name : {{meal.name}}</div>
            <div class= "mealRating col s4">Rating : {{meal.rating}}</div>
            <div class= "mealImg col s4">{{meal.image}}<br></div>
          </div>
          <div class= "row">
            <div class= "mealLocation col s5">Location : {{meal.location}}<br></div>
            <div class= "mealDate col s6">Date : {{meal.date}}<br></div>
          </div>
          <div class = "row">
            <div class= "mealNotes col s7">Notes : {{meal.notes}}</div>
            <!-- <a class="btn col s3 offset-s1 waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> -->
            <a class='btn col s4' href='#mealModal' modal>Show Meal</a>
          </div>
          <div id="mealModal" class="modal">
             <mealinfo></mealinfo>
          </div>
        </div>
      </li>
    </ul>
  </li>
</ul>

Modal view:

<div class="modal-content">
      <h4>{{meal.name}}</h4>
        <div class= "row">
           <div class= "mealName col s4"> Name : {{meal.name}}</div>
           <div class= "mealRating col s4">Rating : {{meal.rating}}</div>
           <div class= "mealImg col s4">{{meal.image}}<br></div>
        </div>
        <div class= "row">
           <div class= "mealLocation col s5">Location : {{meal.location}}<br></div>
           <div class= "mealDate col s6">Date : {{meal.date}}<br></div>
        </div>
        <div class = "row">
           <div class= "mealNotes col s7">Notes : {{meal.notes}}</div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>

Directive:

app.directive('mealinfo', function() {
  return  {
    restrict: 'AE',
    // use meal form template for directive
    templateUrl: '../views/mealInfo.html',
  };
});

Controller:

app.controller('mealView', ['$scope', '$http', function($scope,$http) {

  $http.get("/meals")
   .then(function(data){
     console.log('Data: ', data.data)
     $scope.meals = data.data;
   })
}]);

1 个解决方案

#1

move the <div id="mealModal"> into the file ../views/mealInfo.html
move the <mealInfo> tag outside of the ng-repeat

将

移动到文件中../views/mealInfo.html将 标记移到ng-repeat之外

and replace it with

并替换它

<button type="button" class="btn btn-primary" data-toggle="modal" 
     data-target="#mealmodal" data-ng-click="showModal(meal)";>
        Launch demo modal
</button>

and in the controller:

并在控制器中:

$scope.showModal = function(m) {
    $scope.meal = m;
};

or replace it by

或者替换它

adding ng-click="showModal(meal)" to an existing <div>, <li> or <a> element

将ng-click =“showModal(meal)”添加到现有的

,

或元素中

and in the controller:

并在控制器中:

$scope.showModal = function(m) {
    $scope.meal = m;
    $('#mealModal').modal('show');
};