Javascript 单击时将数据传递到模式

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

我想知道如何将我单击的任何一顿饭的数据绑定到模式？我已将视图分成两个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>

控制器：

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

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

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

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

将

移动到文件

./views/mealInfo.html

将

标记移到ng repeat的外部

并将其替换为

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

或者用

向现有的

、
或
元素添加
ng click=“showModal（膳食）”

在控制器中：

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

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

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

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

建议：将modal div从ng repeat中取出，并在单击膳食时为模式内容设置范围变量（例如$scope.modalmeal）。因此，例如
，我是否需要将范围变量放入控制器中以定义modalmeal是什么？例如，放置一个
$scope.modalmeal=data
类型的东西？您可能可以使用
ng click=“showModal（fine）”
并使用showModal方法设置
$scope.fine=fine
。然后模态代码可以保持不变。我在下面添加了一个带有代码的答案，我能够通过
$scope.showmodel=function（m）{$scope.dine=m；}获得我想要的每个“see-feed”的信息可以通过控制台日志记录看到这一点。我在实际获取对话框时遇到困难。我正在调整您给我的代码，以便使用我正在使用的MaterializeCS。这需要使用对话框。目前有
Show-fine
我得到了一个巨大的灰色模态，我看到了你的编辑。现在，我在所有的情态动词中都得到了关于最后一顿饭的信息。我还收到一个控制台日志错误“.modal不是函数”。我查了一下，这是一个jquery问题，但我有jquery？嘿，我找到了它，非常感谢！关于示波器，我还有很多东西要学。