使用 $index 的动态 ng-repeat 字段答案

【问题标题】：dynamic ng-repeat field using $index使用 $index 的动态 ng-repeat 字段
【发布时间】：2018-05-30 13:14:15
【问题描述】：

我有一组如下图所示的字段 Field_Group

每当单击添加按钮时，我都会添加具有相同数据集的另一行，如下所示 Updated_Fields_Group

下面是我的代码：

    <div>
      <button class="btn btn-primary" name="addnewrow" ng-click="addNew()">Add</button>
    </div>
    <div id="details_$index" ng-repeat="row in rows track by $index">
       <div class="form-group ">
          <label class="col-md-2 control-label">{{Row $index}}
          </label>
          <div class="col-md-4" >
             <input id="email_{{$index}}" type="text" class="form-control"  name="email_{{$index}}" placeholder="email" ng-model="row_$index.email" ng-keyup="getListOfEmails(row_$index.email,$index)"  />
             <ul class="list-group emailDropDownUL">
                <li class="list-group-item emailDropDownLI" ng-repeat="email in list_of_emails_$index" ng-click="updateEmailDetails(row_$index.email,$index)" >{{email_$index}}</li>
             </ul>

          </div>
          <div class="col-md-4">
             <div class="input-group">
                <input type="text" name="mobile_{{$index}}" id="mobile_{{$index}}" ng-model="row_$index.mobile" placeholder="Mobile" class="form-control" numbers-only/>

             </div>
          </div>
       </div>

    </div>
    </code>

当添加按钮被调用时，下面的 json 将推入 rows

{'firstname':"",'lastname':"",'email':"",'mobile':""}

问题来了

当用户在“email”字段中键入文本时，它正在查看数据库并将相关电子邮件列表发送到前端。

现在的问题是，“行”是动态的，我正在使用 ng-repeat，如下所示

ng-repeat="list_of_emails_$index 中的电子邮件"

但是这里list_of_emails_$index 不起作用。

如果我删除了_$index，那么它将填充到所有电子邮件字段中

without _$index

*最后，我们如何创建动态 ng-repeat *

【问题讨论】：

能否提供你的js和HTMl的代码
我认为是ng-model 的问题，ng-model 应该不同。请添加一些代码
谢谢@Vivek。 ng-repeat 的实际问题。我需要创建一个动态 ng-repeat 变量。有关更多详细信息，请更新问题

标签： angularjs angularjs-ng-repeat

【解决方案1】：

试试这个对你有帮助。

<div id="details_$index" ng-repeat="row in rows track by $index">
    <div class="form-group ">
        <div class="col-md-4">
            <input id="email_{{$index}}" type="text" class="form-control" name="email_{{$index}}" placeholder="email" ng-model="row_$index.email" ng-keyup="getListOfEmails(row_$index.email,$index)" />
            <ul class="list-group emailDropDownUL">
                <!--This is how you can find and use dynamic variables from scope. I too have struggled a lot from similar kind of issue.-->
                <li class="list-group-item emailDropDownLI" ng-repeat="email in this['list_of_emails_'+ $index]" >{{email}}</li>
            </ul>

        </div>
        <div class="col-md-4">
            <div class="input-group">
                <input type="text" name="mobile_{{$index}}" id="mobile_{{$index}}" ng-model="row_$index.mobile" placeholder="Mobile" class="form-control" numbers-only />

            </div>
        </div>
    </div>

</div>

<script>
var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope) {

        //Setting up data
        $scope.rows = [];
        $scope.row = {};
        $scope.row.Name = "Test1";
        $scope.rows.push($scope.row);
        $scope.row = {};
        $scope.row.Name = "Test2";
        $scope.rows.push($scope.row);
        $scope.row = {};
        $scope.row.Name = "Test3";
        $scope.rows.push($scope.row);
        $scope.row = {};
        $scope.row.Name = "Test4";
        $scope.rows.push($scope.row);


        //fetching data on some event
        $scope.getListOfEmails = function (email,index) {
            $scope['list_of_emails_' + index] = ['email1', 'email2', 'email3']
        }

});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

    <div id="details_$index" ng-repeat="row in rows track by $index">
        <div class="form-group ">
            <div class="col-md-4">
                <input id="email_{{$index}}" type="text" class="form-control" name="email_{{$index}}" placeholder="email" ng-model="row_$index.email" ng-keyup="getListOfEmails(row_$index.email,$index)" />
                <ul class="list-group emailDropDownUL">
                    <!--This is how you can find and use dynamic variables from scope. I too have struggled a lot from similar kind of issue.-->
                    <li class="list-group-item emailDropDownLI" ng-repeat="email in this['list_of_emails_'+ $index]" >{{email}}</li>
                </ul>

            </div>
            <div class="col-md-4">
                <div class="input-group">
                    <input type="text" name="mobile_{{$index}}" id="mobile_{{$index}}" ng-model="row_$index.mobile" placeholder="Mobile" class="form-control" numbers-only />

                </div>
            </div>
        </div>

    </div>

    <script>
var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {

            //Setting up data
            $scope.rows = [];
            $scope.row = {};
            $scope.row.Name = "Test1";
            $scope.rows.push($scope.row);
            $scope.row = {};
            $scope.row.Name = "Test2";
            $scope.rows.push($scope.row);
            $scope.row = {};
            $scope.row.Name = "Test3";
            $scope.rows.push($scope.row);
            $scope.row = {};
            $scope.row.Name = "Test4";
            $scope.rows.push($scope.row);


            //fetching data on some event
            $scope.getListOfEmails = function (email,index) {
                $scope['list_of_emails_' + index] = ['email1', 'email2', 'email3']
            }

     });
    </script>

</body>
</html>

【讨论】：

谢谢@Vivek。我会尝试并更新状态
谢谢@vivek。这是工作。但是，我遇到了另一个问题。
从我用来调用 updateEmailDetails() 函数的电子邮件列表中选择电子邮件。在这个函数中，我从后端获取与该电子邮件 ID 相关的数据，并设置 mobile、firstname、lastname 字段的值。因此，在使用 javascript 设置数据时，使用 $scope['interviewer_'+index].mobile = data.mobile;但是，它会引发“无法设置未定义的属性'电子邮件'”的错误，请检查一次
上述问题通过添加 var obj = {'firstname':data.firstname,'lastname':data.lastname,'email':data.email,'mobile':data.mobile 解决}; $scope.interviewers_emails[index]=obj;
很高兴知道:)

【解决方案2】：

解决方案 动态 ng 重复

我创建了一个plunker

我想您在数组中有类似以下 js 变量的电子邮件：

$scope.list_of_emails_0 = ['email1', 'email2', 'email3'];
$scope.list_of_emails_1 = ['email4', 'email5', 'email6'];
// ...

你可以创建一个对象而不是分隔变量吗？

$scope.list_of_emails = {
   "0" : ['email1', 'email2', 'email3'],
   "1" : ['email4', 'email5', 'email6']
};

如果你能做到，你也可以循环使用 ng-repeat throw that object

<div ng-repeat="row in rows">
  <h1>{{row}} - index: {{$index}}</h1>
  <p ng-repeat="email in list_of_emails[$index]">{{email}}</p>
</div>

希望对你有帮助！

【讨论】：

谢谢@Luca。我会试试的

【解决方案3】：

问题：

这是我在一个电子邮件字段中连续输入一个值时的问题，然后它将填充到所有行的剩余电子邮件字段中

如果您有相同的ng-model，则会发生这种情况

解决方案：

据我了解认为这是ng-model 的问题， ng-model 对于所有字段应该是不同的。

这是一个例子

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="email in emails">
<input type="email" ng-model="email.email" >
<input type="text" name="mobile_{{$index}}" id="mobile_{{$index}}" ng-model="email.mobile" placeholder="Mobile" class="form-control"/>

</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.emails = [
  {id: 1, email: "email1", mobile: "9848022338"},
  {id: 2, email: "email2", mobile: "1234567890"}
    ]
});
</script>

</body>
</html>

请运行以上代码

Here is a working DEMO

Ps：要使其动态化，因为您需要使用对象数组，在 ngModel 中您可以使用 email.email 和 email.mobile 等

【讨论】：

谢谢@Sravan。实际问题是“我们如何创建动态 ng-repeat 字段”。我更新了问题。请检查一次
@SarvaniTetali，我已将其设为动态，请立即查看