Question

大家好，我不久前使用的是angularjs，现在我有一个与此框架相关的问题我无法解决。所以接下来的问题是：我几乎没有通过ng-repeat生成的输入字段：

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

其中name_list有一些带数据的数组。结果我生成了输入字段。接下来，我想这样做是为了添加新的输入字段，如果所有以前的字段都是$ dirty，我写了下一个角度代码：

userApp.directive('addInput', ['$compile', '$sce', function ($compile, $sce) {
return {
    restrict: 'A',
    require: '?ngModel',

    link: function (scope, element, attrs, ngModel) {

       scope.inputCounter = scope.name_list.length;

       scope.$watch(
           function(){
                 return ngModel.$dirty
           },

           function(dirty_val){
               if (dirty_val){

               scope.name_list.push(ngModel.$modelValue);
               }
           }
       );
    }
}}]);

但当然这个代码工作错误（如果最后一个字段是$ dirty，则添加新字段）我知道为什么它工作错误但我不知道如何跟踪所有ng-models分开，我不知道如何访问某些模型，如ngModel [1]，所以我希望有人会帮助我，谢谢

Answer 1

您可以添加一个将收集脏元素的父指令，并在检测到所有其他元素都是脏的时添加新元素：

检查this plunker。

HTML：

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

一旦addInput检测到它是脏的，请调用父指令控制器：

if (dirty)
    collectInput.reportInput();

JS：

directive('collectInput', function() {
  return {
  restrict: 'A',
  controller: function($scope) {
    var dirtyCount = 0;
    this.reportInput = function() {
      var count = $scope.name_list.length;
      dirtyCount++;
      if (count === dirtyCount) {
        $scope.name_list.push('aaa');
      }
    }
  },
  }
}).
directive('addInput', ['$compile', '$sce', function ($compile, $sce) {
return {
    restrict: 'A',
    require: ['^collectInput', '?ngModel'],

    link: function (scope, element, attrs, ctrls) {
       var collectInput = ctrls[0]
       var ngModel = ctrls[1];
       scope.inputCounter = scope.name_list.length;

       scope.$watch(
           function(){


     return ngModel.$dirty
       },

       function(dirty_val){
           if (dirty_val){
             collectInput.reportInput();
           }
       }
   );
}
}}]);

如何使用.directive跟踪ngModel数组项的行为

1 个答案: