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将推入行

{＆＃39;姓名＆＃39;：＆＃34;＆＃34;＆＃39;姓＆＃39;：＆＃34;＆＃34;＆＃39;电子邮件＆＃39;：＆＃34;＆＃34;＆＃39;移动＆＃39;：＆＃34;＆＃34;}

以下是问题

当用户在＆＃34;电子邮件＆＃34;中输入文字时它正在调查数据库，并将相关电子邮件列表发送到前端。

现在问题是＆＃34;行＆＃34;是动态的，我使用下面的ng-repeat

ng-repeat =＆＃34;发送电子邮件至list_of_emails_ $ index＆＃34;

但是这里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

尝试这一点它会帮助你。

public class Users_ViewHolder extends RecyclerView.ViewHolder{

    View mView;
    public Users_ViewHolder(View itemView) {
        super(itemView);

        mView = itemView;
    }

    public void Set_Name(String Name)
    {
        TextView mName = mView.findViewById(R.id.tv_single_user_name);
        mName.setText(Name);
    }


    public void Set_Image(String url)
    {
        CircleImageView mImage = mView.findViewById(R.id.iv_single_user);
        Picasso.get().load(url).placeholder(R.drawable.profile).into(mImage);
    }


    public void Set_State(String State)
    {
        TextView mState = mView.findViewById(R.id.tv_single_user_state);
        mState.setText(State);
    }
}

}）;

<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']
        }

使用$ index

3 个答案: