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

Question

我有一组如下图所示的字段 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 将推入行

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

问题来了

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

现在的问题是，"rows" 是动态的，我正在使用如下的 ng-repeat

ng-repeat="email in list_of_emails_$index"

但是这里list_of_emails_$index不工作。

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

without _$index

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

Answer 1

问题：

当我在一行中的一个电子邮件字段中输入一个值然后它将填充到所有行的剩余电子邮件字段中时出现问题

如果您有相同的 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等

Answer 2

解决方案 动态 ng-repeat

我创建了一个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 循环抛出那个对象

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

希望对您有所帮助！

Answer 3

试试这个，它会对你有所帮助。

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

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

dynamic ng-repeat field using $index

angularjs

angularjs-ng-repeat