如何在angularjs中使用带输入形式的md对话框?

时间:2016-05-28 01:11:50

标签: javascript angularjs material-design angular-material

我遇到了材质md对话框的问题。这是我的应用程序的codepen(http://codepen.io/anon/pen/EyxyXj)。 当我打开对话框,然后我点击"保存",我创建一张卡片。为什么输入表单中的数据不会保存在卡中?我认为范围存在一些问题。任何人都可以帮助我吗?

.then(function(answer) {
      questList.allsQ.push({
         titolo: questList.titolo ,
         capitolo: questList.capitolo,
         descrizione: questList.descrizione,
         importo: questList.importo,
         data: questList.data
      });
      questList.titolo = '';
      questList.capitolo = '';
      questList.descrizione = '';
      questList.importo = '';
      questList.data = '';
}

功能"推"有效,但点击保存后所有属性都未定义。 谢谢大家。

2 个答案:

答案 0 :(得分:2)

在html上更正输入字段的ng-model,如下所示

<md-input-container class="md-block" flex-gt-xs="">
    <label>Titolo</label>
    <input ng-model="questList.titolo"  size="30" placeholder="inserisci il titolo">
</md-input-container>

您需要将模型中更新的数据传递给hide()函数,如下所示。

  .controller('DemoCtrl', function($scope, $mdDialog, $mdMedia) {
    $scope.status = '  ';
    var questList = this;
    questList.allsQ = [];
    questList.openDialog = function($event) {
      $mdDialog.show({
        controller: function ($timeout, $q, $scope, $mdDialog) {
                var quest =this; 
                // you will be returning quest

                $scope.cancel = function($event) {
                $mdDialog.cancel();
                };
                $scope.finish = function($event) {
                $mdDialog.hide();
                };
                $scope.answer = function() {
                //pass quest to hide function.
                $mdDialog.hide(quest);
                };
                },
        controllerAs: 'questList',
        templateUrl: 'dialog.tmpl.html',
        parent: angular.element(document.body),
        targetEvent: $event,
        clickOutsideToClose:true,
         locals: {parent: $scope},
      })
     .then(function(quest) {

      //here quest has data you entered in model
      questList.allsQ.push({
         titolo: quest.titolo ,
         capitolo: quest.capitolo,
         descrizione: quest.descrizione,
         importo: quest.importo,
         data: quest.data
      });
      questList.titolo = '';
      questList.capitolo = '';
      questList.descrizione = '';
      questList.importo = '';
      questList.data = '';
      console.log(questList.allsQ);
      console.log(questList.allsQ.length);
    });
    };
  });

答案 1 :(得分:2)

我要提供的答案肯定不是最好的答案,但它是有效的

从Salva按钮上的md-dialog模板中删除ng-submit添加 ng-click="answer(questList)"并按照这样推动

  questList.allsQ.push({
     titolo: answer.titolo ,
     capitolo: answer.capitolo,
     descrizione: answer.descrizione,
     importo: answer.importo,
     data: answer.data
  });

有一个例子我分叉你的codepen

http://codepen.io/tougo/pen/QEWGKv