Hinzufügen von Textfeld zu eckiger Form

Question

Ich versuche, ein Textfeld dynamisch zu einem eckigen Formular hinzuzufügen. Ich benutze ng-repeat und ich kann die Textbox einfach hinzufügen, indem ich einfach eine leere Zeichenfolge an das Array drücke. Es wird ein weiteres Textfeld hinzufügen, das Problem ist, dass ng-model die Daten nicht synchronisiert, und wenn Text hinzugefügt wird, bleibt es eine leere Zeichenfolge.

Die Textfelder, die von der ursprünglichen Array-Synchronisierung erstellt werden, funktionieren einwandfrei. Es sind nur die neu hinzugefügten Textfelder, die nicht funktionieren.

Ich habe mich umgesehen und einen Vorschlag, den ich sah, war immer ein "." bei der Verwendung von ng-Modell, aber das hat nicht für mich funktioniert.

<div ng-repeat="text in image.text track by $index"> 

     <md-input-container class="md-block" novalidate> 
     <label>Text {{$index + 1}}:</label> 

     <textarea md-maxlength="2500" md-midlength="1" required md-no-asterisk name="text" 
     placeholder="{{text}}" 
     ng-model="text"></textarea> 
     </md-input-container> 
    </div> 

Controller:

(function() { 'Verwendung streng';

angular 
    .module('app.article') 
    .controller('ArticleEditController', ArticleEditController); 

ArticleEditController.$inject= ['articleEditDataService', '$routeParams', '$log']; 

function ArticleEditController(articleEditDataService, $routeParams, $log) { 
    var vm = this; 

     var site = $routeParams.site; 
    var articleName = $routeParams.article; 
    var articleRevision_id = $routeParams.revision_id; 

    vm.data = {}; 
    vm.addNewText = addNewText; 
    vm.removeText = removeText; 
    vm.saveArticle = saveArticle; 
    vm.numMessage = 1; 

    activate(); 

    function activate(){ 
     getArticle(); 
    } 

    function getArticle(){ 
     var data = articleEditDataService.getArticle(site, articleName, articleRevision_id); 
     data.then(function successResponse(res) { 
      vm.data = res.results.data; 
     }, function errorResponse (res) { 
      console.log(res); 
     }); 
    } 

    function saveArticle(){ 
     var article = articleEditDataService.postArticle(vm.data, site, articleName, articleRevision_id); 
     console.log(vm.data); 
     article 
      .then(updateArticleSuccess) 
      .catch(updateArticleError); 
    } 

    function updateArticleSuccess(message){ 
     $log.info(message); 
    } 

    function updateArticleError(errorMessage){ 
     $log.error(errorMessage); 
    } 


    function addNewText (index, key) { 
     vm.data.content.image_sets[key].text.push(""); 
    } 

    function removeText (index, key) { 
     if(vm.data.content.image_sets[key].text.length > 1){ 
     vm.data.content.image_sets[key].text.pop(); 
     } 
    } 


}; 

})();

Answer 1

initialisieren Sie die Modellvariable in Ihrem Controller als leeres Objekt.

dann innerhalb Ihrer Texteingabe Ihr ng-Modell = "Modell [$ index]".