将文本框添加到 Angular 表单

Question

我正在尝试将文本框动态添加到 Angular 表单。我正在使用 ng-repeat，只需将空字符串推送到数组即可轻松添加文本框。它将添加另一个文本框，问题是 ng-model 没有同步数据，并且添加文本时它仍然是一个空字符串。

从初始数组创建的文本框同步很好，只是新添加的文本框不起作用。

我一直在环顾四周，看到的一个建议是始终使用“。”使用 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]"。