角型にテキストボックスを追加する

Question

角型にテキストボックスを動的に追加しようとしています。私はng-repeatを使用しています。空の文字列を配列にプッシュするだけで簡単にテキストボックスを追加できます。別のテキストボックスが追加されますが、問題はng-modelがデータを同期していないことです。テキストを追加すると空の文字列のままです。

最初の配列から作成されるテキストボックスはうまく同期しますが、新しく追加されたテキストボックスは機能しません。

私は周りを見てきました。私が見た1つの提案は、常に "。" ng-modelを使用すると、それは私のためには機能しませんでした。

<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> 

コントローラー：

（関数（）{ 'は厳密使用';

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

コントローラ内のモデル変数を空のオブジェクトとして初期化します。

あなたのテキストの中にng-model = "model [$ index]"と入力してください。