如果所有其他元素都填写在 AngularJS 中，如何动态添加新的输入元素

Question

请观看Plunker

所以我使用 angular 并且需要在填写所有其他字段时添加新的输入字段（默认情况下在页面上放置 5 个输入，如果所有这些都已填充，则自动添加一个输入，如果新输入也使用将添加一个输入等）。

对于生成输入，我使用 ng-repeat 和 name_list[]：

<div collect-input>
<div class="form-group" ng-repeat="(i, name) in name_list track by $index">
    <div class="row">
        <div class="col-xs-12">
            <input class="form-control" type="text" ng-model="data.name_list[i]" add-input/>
        </div>
    </div>
</div>

每个输入都有指令 attr "add-input" 和 $watch() 方法。此方法方法跟踪 $isEmpty 参数何时更改。 然后value函数把这个参数的值传给listen函数。

directive('addInput', ['$compile', '$sce', '$timeout', function ($compile, $sce, $timeout) {
return {
    restrict: 'A',
    require: ['^collectInput', '?ngModel'],

    link: function (scope, element, attrs, ctrl) {
       var collectInput = ctrl[0];
       var ngModel = ctrl[1];

       $timeout(function(){ 
           scope.$watch(
               function(){  
                     return ngModel.$isEmpty(ngModel.$modelValue);
               },

               function(isEmpty){
                   collectInput.reportInput(ngModel, isEmpty);
               }
           );
       },1000)
    }
}

}]);

然后这个函数调用放置在父指令“collect-input”中的“reportInput()”。此函数的主要目标是向 name_list[] 添加新的输入名称，以便通过 ng-repeat 生成

userApp.directive('collectInput', function() {
  return {
  restrict: 'A',
  controller: function($scope) {
    var dirtyCount = 0;
    this.reportInput = function(modelValue, isEmpty) {
      var count = $scope.name_list.length;        

       if (isEmpty == false){
           dirtyCount ++;
           console.log('+1:' + dirtyCount);
       }

       if (isEmpty == true){
           if (dirtyCount <= 0){
                dirtyCount = 0;
               console.log('0:' + dirtyCount);
           }
           else if(dirtyCount > 0){
               dirtyCount --;
               console.log('-1:' + dirtyCount)
           }
       }


       if (count === dirtyCount) {
             $scope.name_list.push(modelValue);
             //dirtyCount = dirtyCount + 1;
       }


      console.log('count:' + count);
      console.log('dirtyCount:' + dirtyCount);
      console.log(modelValue)
    }
  },
  link: function(scope, element, attrs) {

  }}});

因此，当我填充 5 个默认输入时，在它出现新输入后一切都很好，但它都在我的 IDE 中，如果我只为 5+ 标签添加一个符号（在 plunker 中由于某种原因它不起作用），它就可以完美工作，但是当我添加或删除了更多代码逻辑崩溃。很难解释。我希望 Plunker 代码能更清楚地说明这一点。

Answer 1

未经测试，可以优化，但这是我的想法：

HTML：

<div class="form-group" ng-repeat="name in name_list">
    <div class="row">
        <div class="col-xs-12">
            <input class="form-control" ng-model="name"/>
        </div>
    </div>
</div>

JS：

//watch any modification in the list of names
$scope.$watchCollection('data.name_list', function (list) {
    //is there an empty name in the list?
    if (!list.filter(function (name) { return !name; }).length) {
        //if not, let's add one.
        data.name_list.push('');
        //and that will automatically add an input to the html
    }
});

我没有看到指令的意义。