2017-05-03 32 views
0

我想在我的web應用程序關閉md-dialog後更改我的列表中值。這意味着,首先你點擊一行,然後打開一個由角材料定義的對話框。在我更改了這個被調用的對象中的一個值並點擊「確定」之後,該值需要在列表中更新。目前它是異步工​​作的。當對話框視圖中的值發生變化時,在點擊「OK」之前立即在列表中更改該值。如何在關閉對話框(角材)後更改數值?

當我測試了我的做法的單變量它的工作原理,你可以在下面的代碼中看到:

//Main view: 

    <div class="md-padding"> 
     <p>{{c.txtSample}}</p> 

     <md-button class="md-raised md-primary" ng-click="fc.openDialog(c.txtSample)"> 
      Klick 
     </md-button> 
    </div> 


//dialog view: 
<div class="md-dialog-container"> 
    <md-dialog> 
     <md-dialog-content class="md-dialog-content"> 
      <md-input-container class="md-block"> 
       <label>Sample text</label> 
       <input ng-model="c.textInput" /> 
      </md-input-container> 
     </md-dialog-content> 

     <md-dialog-actions> 
      <md-button class="md-raised" ng-click="c.klickOK(c.textInput)"> 
       OK 
      </md-button> 
     </md-dialog-actions> 
    </md-dialog> 
</div> 

//MainCtrl 
vm.txtSample = 'Change the inputtext.'; 
vm.openDialog = openDialog; 

     function openDialog(item) { 
      $mdDialog.show({ 
       parent: angular.element(document.body), 
       templateUrl: 'App/views/testDialog.html', 
       controller: function TestCtrl($scope, sampleTxt) { 
        var vm = this; 

        vm.textInput = sampleTxt; 
        vm.klickOK = klickOK; 

        function klickOK(item) { 
         $mdDialog.hide(item); 
        } 
       }, 
       controllerAs: 'c', 
       preserveScope: true, 
       locals: { 
        sampleTxt: item 
       } 
      }).then(function (item) { 
       vm.txtSample = item; 
      }, function() { 
       alert('Abgebrochen'); 
      }); 
     } 

但對於一個列表值這是行不通的。我不知道爲什麼...這裏的代碼示例與選定的行:

//Main view: 
<div class="md-padding"> 
    <div ng-repeat="wert in fc.werteliste track by $index"> 
     <span flex="20">{{wert.wert1}}</span> 
     <span flex="20">{{wert.wert2}}</span> 
     <span flex="40">{{wert.wert3}}</span> 

     <md-button class="md-raised md-primary" ng-click="fc.openDialog(wert)"> 
      Klick 
     </md-button> 
    </div> 
</div> 

//Dialog view: 
<div class="md-dialog-container"> 
    <md-dialog> 
     <md-dialog-content class="md-dialog-content"> 
      <md-input-container class="md-block"> 
       <label>Wert 1</label> 
       <input ng-model="c.textInput.wert1" /> 
      </md-input-container> 

      <md-input-container class="md-block"> 
       <label>Wert 2</label> 
       <input ng-model="c.textInput.wert2" /> 
      </md-input-container> 

      <md-input-container class="md-block"> 
       <label>Wert 3</label> 
       <input ng-model="c.textInput.wert3" /> 
      </md-input-container> 
     </md-dialog-content> 
     <md-dialog-actions> 
      <md-button class="md-raised" ng-click="c.klickOK(c.textInput)"> 
       OK 
      </md-button> 
     </md-dialog-actions> 
    </md-dialog> 
</div> 

//MainCtrl: 
vm.openDialog = openDialog; 

     function openDialog(item) { 
      $mdDialog.show({ 
       parent: angular.element(document.body), 
       templateUrl: 'App/views/testDialog.html', 
       controller: function TestCtrl($scope, objItem) { 
        var vm = this; 

        vm.textInput = objItem; 

        vm.klickOK = klickOK; 
        function klickOK(item) { 
         $mdDialog.hide(item); 
        } 
       }, 
       controllerAs: 'c', 
       preserveScope: true, 
       locals: { 
        objItem: item 
       } 
      }).then(function (item) { 
       //e.g. the first item 
       vm.werteliste[0] = item; 
      }, function() { 
       alert('Abgebrochen'); 
      }); 
     } 

任何人都可以幫助我?

回答

0

我相信你可以只分配結果item到openDialog item

而且你也許需要$scope.$apply

vm.openDialog = openDialog; 

    function openDialog(item) { 
     $mdDialog.show({ 
      parent: angular.element(document.body), 
      templateUrl: 'App/views/testDialog.html', 
      controller: function TestCtrl($scope, objItem) { 
       var vm = this; 

       vm.textInput = objItem; 

       vm.klickOK = klickOK; 
       function klickOK(item) { 
        $mdDialog.hide(item); 
       } 
      }, 
      controllerAs: 'c', 
      preserveScope: true, 
      locals: { 
       objItem: item 
      } 
     }).then(function (resultItem) { 
      //e.g. the first item 
      item = resultItem; 

      $scope.$apply(); // maybe its unnecessary 
     }, function() { 
      alert('Abgebrochen'); 
     }); 
    } 
1

如果你想將項目添加到陣列的前端,用到unshift()方法將項目添加到數組的開頭。 vm.werteliste.unsift(項目);

我懷疑問題是要傳遞WERT到對話,而不是fc.werteliste

希望幫助