Question

我有一个关于angularjs的查询，即我有一个表格，其中有行，但这些行是由用户动态插入的。这意味着如果我有一个拥有多个所有者的公司，那么我允许他们通过简单地点击随文本框放置的添加按钮（即姓名，电子邮件，数字文本框）添加任意数量的所有者我使用过＆＃39; ng-repeat＆＃39;在一行上，以便可以逐个动态添加所有者列表。从数据库中获取值时，它工作得非常好但是当我尝试通过单击“添加”来添加值时。按钮，它添加新行与所有文本框但与前一行相同的值。我认为这是因为我使用ng-model链接数据..但那是我可以绑定数据的唯一选项..有没有人有这个问题的解决方案。？请帮我。先感谢您我正在分享代码示例以便更好地理解，

JSP代码：

<tbody id="insertionRow">
    <tr>
        <th>#</th>
        <th class="required">Name</th>
        <th>Email</th>
        <th>Phone No</th>
        <th>Add</th>
        <th>Delete</th>

    </tr>
    <tr data-ng-repeat="c in ctrl.client.clientOwnerVOList">
        <td>{{$index + 1}}</td>

        <td class="col-lg-3"><input type="Text"
            class="form-control"
            data-ng-model="c.clientOwnerName"
            name="clientOwnerName{{$index + 1}}" id="Name">

            </td>

        <td class="col-lg-4"><input type="Email"
            class="form-control"
            data-ng-model="c.clientOwnerEmail"
            name="clientOwnerEmail{{$index + 1}}" id="Email"></td>

        <td class="col-lg-3"><input type="Text"
            class="form-control"
            data-ng-model="c.clientOwnerPhone"
            name="clientOwnerPhone{{$index + 1}}" id="PhoneNo"></td>

        <td> 
        <button type="button"
                data-ng-click="insert();"
                class="btn btn-sm btn-default">
                <i class="fa fa-plus fa-lg"></i>
            </button></td>

        <td><button type="button"
                    onClick="$(this).closest('tr').remove();"
                class="btn btn-sm btn-default">
                <i class="fa fa-trash fa-lg "></i>
            </button></td>

    </tr>
</tbody>

AngularJS控制器代码：

$scope.insert = function(){
  var tableRow ="<tr data-ng-repeat='c in ctrl.client.clientOwnerVOList'>"+ 
    "<td>"+i+"</td>"+
    "<td class='col-lg-3'><input type='Text' class='form-control' data-ng-model='c.clientOwnerName' name='clientOwnerName{{$index + 1}}' ></td>"+
    "<td class='col-lg-4'><input type='Email' class='form-control' data-ng-model='c.clientOwnerEmail' name='clientOwnerEmail{{$index + 1}}'</td>"+
    "<td class='col-lg-3'><input type='Text' class='form-control' data-ng-model='c.clientOwnerPhone' name='clientOwnerPhone{{$index + 1}}' ></td>"+
    "<td><button type='button' data-ng-click='insert()' class='btn btn-sm btn-default'><i class='fa fa-plus fa-lg'></i></button></td>"+
    "<td><button type='button' class='btn btn-sm btn-default' onClick=$(this).closest('tr').remove();><i class='fa fa-trash fa-lg '></i></button></td>"+
    "</tr>";

  var compiledString = $compile(tableRow)($scope);

  $("#insertionRow").append(compiledString);
    i++;
};

客户端Object如下

self.client= {
    clientID:'',
    clientName:'',
    clientDescription:'',
    clientAddressLine:'',
    clientContactPersonPhone:'',
    createdOn:'',
    astUpdatedOn:'',
    country:'',
    state:'',
    city:'',
    isDeleted:'',
    clientOwnerVOList: [
        {
            clientOwnerID:'',
            createdOn:'',
            isDeleted:'' ,                           
            clientOwnerName:'',
            clientOwnerPhone:'',
            clientOwnerEmail:''
        }
    ]
}

Answer 1

插入功能很奇怪。 AFAIT您正在将一些已编译的HTML插入到DOM中。 Angular的全部内容是让您避免手动执行此操作。您应该直接通过向其添加所需的JS对象来更改ctrl.client.clientOwnerVOList，然后更改将由DOM反映。

代码看起来应该类似于这个，你更了解的加减应用程序特定逻辑。

$scope.append = function() {
  self.client.clientOwnerVOList.push({
    clientOwnerId: 'newid',
    createdOn: 'today',
    isDeleted: 'false',
    clientOwnerName: 'foo',
    clientOwnerPhone: 'bar',
    clientOwnerEmail: 'foo@bar.com'
  });
}

填充客户信息的值将取自其他地方（其他模型字段或某些合理的默认值等）。

基本上，你有一堆数据（self.client，以及来自范围的任何其他控制器变量）。视图是此数据的函数，您将描述如何通过html模板构建DOM，该模板可以访问范围中的字段。找出如何做到这一点是Angular的工作。每当发生某种事件时，比如按下按钮或网络事件等，您都会更新数据，然后Angular为您重建DOM。

Answer 2

我试图在这个plunker中重现你的问题： https://plnkr.co/edit/Eqw21bGNetGtHZIQZCYw?p=preview

我更改了插入功能以创建新的clientOwnerVO。

我只是像这样推送新对象：

$scope.client.clientOwnerVOList.push({clientOwnerID:'',
              createdOn:'',
              isDeleted:'' ,                           
               clientOwnerName:''
              ,clientOwnerPhone:''
              ,clientOwnerEmail:'',});
                i++;

我希望我理解你的问题

使用动态数据处理ng-repeat

2 个答案: