динамическое поле ng-repeat с использованием $ index - PullRequest
Новая
       9

динамическое поле ng-repeat с использованием $ index

0 голосов
/ 29 мая 2018

У меня был набор полей, подобных следующему изображению 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': "", 'фамилия': "", 'email': "", 'mobile': ""}

Вот проблема

Когда пользователь вводит текст в поле «электронная почта», он просматривает БД и отправляет список связанных сообщений электронной почты во внешний интерфейс.

Теперь проблема заключалась в том, что «строки»"являются динамическими, я использую ng-repeat, как показано ниже

ng-repeat =" email in list_of_emails_ $ index "

Но здесь list_of_emails_$index не работает.

если я удалил _$index, он будет заполнен во всех полях электронной почты

без _ $ index

* Наконец,как мы можем создать динамический нг-повтор *

Ответы [ 3 ]

0 голосов
/ 30 мая 2018

Решение Динамическое 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>

Надеюсь, это полезно!

0 голосов
/ 30 мая 2018

попробуйте, это поможет вам. 

<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>
0 голосов
/ 29 мая 2018

Проблема:

Вот проблема, когда я ввел значение в одно поле электронной почты в строке, после чего оно будет заполнено в оставшемся поле электронной почты всех строк

Это происходит, если у вас есть то же самое ng-model

Решение:

Насколько я понимаю, это такпроблема с ng-model, ng-моделью должна быть разной для всех полей.

Вот пример 

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

Пожалуйста, запустите приведенный выше код

Вот рабочая ДЕМО

Ps: Чтобы сделать его динамичным, поскольку вы взяли массив объектов, требуется, и в ngModel вы можете взять email.email и email.mobile и т. Д.

...