单击时将数据传递到模态

Question

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

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

单餐视图：

<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>

模态视图：

<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>

指令：

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

控制器：

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

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

Answer 1

将 <div id="mealModal"> 移动到文件 ../views/mealInfo.html
将 <mealInfo> 标签移到 ng-repeat

之外

并将其替换为

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

在控制器中：

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

或替换为

将 ng-click="showModal(meal)" 添加到现有 <div>, <li> or <a> 元素

在控制器中：

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

单击时将数据传递到模态

Pass data into a modal when clicked

javascript

data-binding

modal-dialog

angularjs