AngularJS (Material) - Обновление данных в md-списке после добавления нового объекта с использованием md-dialog

Я довольно новичок во всем мире Angular, но вчера я столкнулся с проблемой, которую я не могу исправить. В качестве прототипа я создаю простое приложение Task, которое позволяет пользователю создавать, просматривать и удалять задачи. Новая задача может быть создана нажатием кнопки, которая открывает диалог. Некоторая информация может быть предоставлена, и нажав «добавить задачу», задача будет добавлена в базу данных.AngularJS (Material) - Обновление данных в md-списке после добавления нового объекта с использованием md-dialog

Единственная проблема заключается в том, что после закрытия диалогового окна md-list, который отображает список элементов, не обновляется, чтобы показать вновь добавленную задачу. Я попытался использовать опцию «tack by» для ng-repeat, но это не сработало.

Я получил информацию от этого вопроса: http://stackoverflow.com/questions/27874976/update-a-md-list-dynamically-from-angular

код я использую для отображения задачи это один (упрощенный)

<html lang="en" ng-app="taskApp"> 
<head></head> 
<body> 
    <div ng-controller="TaskController"> 
     <md-list> 
      <md-list-item ng-repeat="task in tasks track by task.id"> 
       <md-checkbox ng-model="task.checked" ng-change="updateTask(task)" aria-label="Complete Task"></md-checkbox> 
       <p>{{ task.title }}</p> 
      </md-list-item> 
     </md-list> 
    </div> 
</body> 
</html>

шаблон для диалога выглядит следующим образом:

<md-dialog aria-label="Create new task"> 
    <md-content> 
     <md-card class="card-padding"> 
      <form ng-submit="addTask(newTitle)"> 
       <h2 class="md-title">Add a new task</h2> 
       <div layout="row"> 
        <md-input-container flex> 
         <label>Title</label> 
         <input ng-model="newTitle"> 
        </md-input-container> 
       </div> 
       <div layout="row"> 
        <md-input-container flex> 
         <md-button class="md-raised md-primary" type="submit" ng-disabled="!newTitle || !newDescription">Add Task</md-button> 
        </md-input-container> 
       </div> 
      </form> 
     </md-card> 
    </md-content> 
</md-dialog>

И контроллер выглядит следующим образом:

(function(angular) { 
    var TaskController = function($scope, $mdDialog, Task) { 
     Task.query(function(response) { 
      $scope.tasks = response ? response : []; 
     }); 

     $scope.addTask = function(title) { 
      new Task({ 
       title: title, 
       checked: false 
      }).$save(function(task) { 
       $scope.tasks.push(task); 
      }); 
      $scope.newTitle = ""; 
      $mdDialog.hide(); 
     }; 

     $scope.showDialog = function(ev) { 
      $mdDialog.show({ 
       controller: TaskController, 
       templateUrl: 'taskdialog.tmpl.html', 
       parent: angular.element(document.body), 
       targetEvent: ev, 
      }); 
     }; 

     $scope.updateTask = function(task) { 
      task.$update(); 
     }; 

     $scope.deleteTask = function(task) { 
      task.$remove(function() { 
       $scope.tasks.splice($scope.tasks.indexOf(task), 1); 
      }); 
     }; 
    }; 

    TaskController.$inject = ['$scope', '$mdDialog', 'Task']; 
    angular.module("taskApp.controllers").controller("TaskController", TaskController); 
}(angular));

Так что мне было интересно, может ли кто-нибудь помочь мне с этой проблемой.
Спасибо заранее!

источник

2015-07-14 Robin Hermans

Вы задаете задачу в списке задач в неправильном объеме.

следующее должно сделать для вас работу. показывая диалог.

$mdDialog.show({ 
    controller: TaskController, 
    templateUrl: 'taskdialog.tmpl.html', 
    parent: angular.element(document.body), 
    targetEvent: ev, 
}).then(function(task){ 
    $scope.tasks.push(task); 
});

при скрытии диалога.

$mdDialog.hide(task);

источник

2015-07-14 09:18:47 atinder

Спасибо, мне удалось решить проблему с вашим решением. Просто побочный эффект: при реализации решения я увидел, что функция hide не позволяет использовать более одного параметра. Если я вставлю два, он потеряет второй параметр. Это верно? –

да, чтобы передать несколько задач, вы можете сделать что-то вроде этого '$ mdDialog.hide ([task1, task2, task3]);' – atinder

Upvote для двух ответов в одном :) – DrUseful

AngularJS (Material) - Обновление данных в md-списке после добавления нового объекта с использованием md-dialog

ответ

Смежные вопросы