角度的新手。我正在构建一个有餐卡的应用程序，然后单击按钮以获取扩展了信息的模式。我有一张可折叠的餐单，每餐都有一顿独特的饭菜。当我单击按钮时，仅显示第一餐的数据。
我想知道如何将点击的任何餐点的数据绑定到模态？我已将我的视图分为两个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;
})
}]);
将移到<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');
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句