Передача данных в модальный при нажатии

0

Новый для углового. Я создаю приложение, в котором есть карта еды, и вы нажимаете на кнопку для модальной версии с расширенной информацией. У меня есть разборчивый список блюд, каждый из которых имеет уникальную еду. Когда я нажимаю на кнопки, отображаются только первые данные приема пищи.

Мне интересно, как я могу привязать данные любой еды, которую я нажимаю на модальный? Я разделил свои представления на два 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;
   })
}]);
  • 0
    совет: возьмите модальный div из ng-repeat и установите переменную области видимости (например, $ scope.modalmeal) для модального содержимого при щелчке еды.
  • 0
    так, например, <a class='btn col s4' href='#mealModal' modal ng-click="modalmeal">Show Meal</a> мне нужно поместить переменную области действия в контроллер, чтобы определить, что такое модальная мука? например, добавление $scope.modalmeal = data типа $scope.modalmeal = data ?
Показать ещё 1 комментарий
Теги:
modal-dialog
data-binding

1 ответ

0
Лучший ответ

переместите <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');
};
Поделиться
  • 0
    Я смог получить информацию, которую хотел получить для каждого из « $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> Я получаю гигантский серый модал в данный момент
  • 0
    Круто, я видел твои правки. Прямо сейчас я получаю информацию во всех модальных моделях только о последней «еде». Я также получаю сообщение об ошибке консоли «.modal не является функцией». Я посмотрел, и это проблема JQuery, но у меня есть JQuery?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню