javascript - 如何在 ng-repeat div 中获取值？

Question

我有一个带有 div 的模态，它包括:1.一个文本输入。2. 两个下拉菜单。

我也有根据需要添加和删除上述 div 的按钮，我通过以下方式实现了相同的目的:

$scope.data = [{}];

1.添加:

        $scope.addRow = function(){
           $scope.data.push({});            
        }
    }

1. 删除:

       $scope.removeRow = function(){
       $scope.data.splice($scope.data.length-1,1); 
   }
   

这很好用，它适本地添加和删除了 div。

这是我的 HTML:

<div class="row" ng-repeat="count in data">
         <div class="col-lg-4 col-md-3 col-xs-6 col-sm-6">
            <input type="text" ng-model="inputNumber" class="form-control" ng-required="true" autofocus="true"/>
        </div>

     <div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
      <div class="controls">
          <select class="form-control" ng-options="item.Data for item in items" ng-model="init"></select> 
        </div>
    </div> 

    <div class="col-lg-4 col-md-4 col-xs-6 col-sm-6">
      <div class="controls">
          <select class="form-control" ng-options="item for item in allItems" ng-model="getNewData"></select> 
        </div>
    </div>

</div>

它基本上由文本输入字段和两个带有特定选项的下拉菜单组成。

我的问题是，当我使用我输入的值“添加”或“删除”此 div 时 - 如何获取 Controller 函数中的所有输入值并将其存储在数组中？

angular.toJson($scope.data) 上的 console.log 给我一个空输出。

我遗漏了什么，如何获取每个字段的所有行的值？

Answer 1

您的数据似乎来自整个 map 。所以很难说这里发生了什么。您的外部 ng-repeat 正在重复数据中的计数，但您再也不会引用它。您的文本输入甚至根本没有绑定(bind)到 ng-model，所以我不确定要求它有什么意义。

我的建议是创建一组对象，这些对象具有驱动您的两个选择和一个输入的属性。所以也许像这样:

//these names are coming from your code. I know they make no sense, but there's not enough in your code to figure out what the sensible names would be$scope.data = [   {id:1, inputVal:'', init:'', getNewData:''},   {id:2, inputVal:'', init:'', getNewData:''}]

在这种情况下，您可能希望添加一个“track by”，因为它们是空对象。我假设您的真实对象具有它们可以使用的真实值，但我没有信息可以在其中放置任何东西。

然后你可以将文本输入上的 ng-model 设置为 count.inputVal，第一个选择为 count.init，第二个选择为 计数.getNewData。您的删除按钮将指向您的 $scope.data 集合中的整个选定元素，因此它的所有属性都将在那里。