Новый для углового. Я создаю приложение, в котором есть карта еды, и вы нажимаете на кнопку для модальной версии с расширенной информацией. У меня есть разборчивый список блюд, каждый из которых имеет уникальную еду. Когда я нажимаю на кнопки, отображаются только первые данные приема пищи.
Мне интересно, как я могу привязать данные любой еды, которую я нажимаю на модальный? Я разделил свои представления на два 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');
};
$scope.showModal = function(m) { $scope.meal = m; };
блюд», с помощью $scope.showModal = function(m) { $scope.meal = m; };
смог увидеть это с помощью консоли регистрации. У меня возникают трудности с получением диалогового окна. Я корректирую код, который вы мне дали, для работы с моим materializecss, который я использую. который требует <a> </a> для работы с диалоговым окном. в настоящее время есть <a type="button" class="btn btn-primary col s4" data-toggle="modal" data-target="mealmodal" data-ng-click="showModal(meal)" modal>Show Meal</a>
Я получаю гигантский серый модал в данный момент
<a class='btn col s4' href='#mealModal' modal ng-click="modalmeal">Show Meal</a>
мне нужно поместить переменную области действия в контроллер, чтобы определить, что такое модальная мука? например, добавление$scope.modalmeal = data
типа$scope.modalmeal = data
?