Question

我有一个功能，我从用户那里获取客户列表，首先我将此列表存储在angularjs控制器的List对象中，然后将其发送到服务器。问题是，当我从用户那里获取输入时，我给出了一些文本框，用户填写了所有数据后，用户点击文本框旁边的ADD按钮，然后刚添加的记录被附加到空白行，即旨在接受输入。我已经规定，附加的记录是＆＃34;只读＆＃34;或说'＃34;已禁用＆＃34;和旁边的UPDATE按钮。我想要的是如何编写将启用＆＃34;启用＆＃34;单击其更新按钮的特定行。我使用了角度js，我正在分享一些代码片段和一个代表性的图像，以便更好地理解，请帮忙..！！谢谢 JSP页面

<tbody id="insertionRow" ng-init="edit=true">
        <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"
            id="clientOwnerName{{$index + 1}}" data-ng-disabled="isDisable(c)" id="name">
        </td>

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

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

        <td>
            <button id="add{{$index + 1}}" type="button"
                 data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)==0" data-ng-click="insert(c)"
                class="btn btn-sm btn-default">
                <i class="fa fa-plus fa-lg"></i>
            </button>
            <button id="edit{{$index + 1}}" type="button"
                data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)>0"
                class="btn btn-sm btn-default">
                <i class="fa fa-edit fa-lg"></i>
            </button >
            <button id="refresh{{$index + 1}}"  type="button" style="display:none"
                class="btn btn-sm btn-default">
                <i class="fa fa-refresh fa-lg"></i>
            </button>
        </td>

        <td><button type="button" data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)>0"
                ng-click="remove(c);" class="btn btn-sm btn-default">
                <i class="fa fa-trash fa-lg "></i>
            </button>
            <button type="button" data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)==0"
                class="btn btn-sm btn-default">
                <i class="fa fa-trash fa-lg "></i>
            </button>
        </td>

    </tr>
</tbody>

控制器代码

$scope.insert=function(clientOwner){
    self.client.clientOwnerVOList.push({clientOwnerName:clientOwner.clientOwnerName,clientOwnerEmail:clientOwner.clientOwnerEmail,clientOwnerPhone:clientOwner.clientOwnerPhone});

                      clientOwner.clientOwnerName="";
                      clientOwner.clientOwnerEmail="";
                      clientOwner.clientOwnerPhone="";
    }

   $scope.isDisable = function(clientOwner){
              //alert("in new isDisable");
              if(self.client.clientOwnerVOList.indexOf(clientOwner)==0){
                  return false;
                }
              else{
                  return true;
              }

          }

Answer 1

您可以对html中的编辑按钮执行此类操作

    <button id="edit{{$index + 1}}" type="button"
        data-ng-if="ctrl.client.clientOwnerVOList.indexOf(c)>0"
        class="btn btn-sm btn-default" data-ng-click="editRow(c)">
        <i class="fa fa-edit fa-lg"></i>
    </button >

类似于你的可编辑元素

<input type="Text" class="form-control" 
        data-ng-model="c.clientOwnerPhone" data-ng-disabled="!c.enable"
        id="clientOwnerPhone{{$index + 1}}">

在控制器中

$scope.edit = function(row){

    row.enable = true;

}

每当提交更新的数据时，请确保将整行作为参数传递给控制器

//assuming the submit function to be like this

$scope.submit = function(row){
    row.enable = false;
}

Answer 2

我通常做的是在控制器中有一个变量selectedItem。点击修改后，您可以将c中的项ng-repeat设置为所选项目。

然后在您的ng-if和ng-disabled视图中使用比较c==ctrl.selectedItem

控制器

self.selectedItem = data[0];
self.setSelected(item){
   self.selectedItem = item
}

查看

<button edit ng-click="ctrl.setSelected(item)">
<input data-ng-model="c.clientOwnerName" data-ng-disabled="!c==ctrl.selectedItem">

Answer 3

在ng-disabled条件下使用变量（可能是数组/对象）是很好的，因为很容易切换变量。数组变量用于映射每行的编辑条件。

假设我有一个如下的数组项：

$scope.items = [{id: 101, name: 'item1'}, {id: 102, name: 'item2'}];

模板

<tr ng-repeat="item in items" >
    <td>
      <input type="text" ng-if="isEditItem[$index]" ng-model="item.id" />
      <span ng-if="!isEditItem[$index]">{{item.id}}</span>
    </td>
    <td>
      <input type="text" ng-if="isEditItem[$index]" ng-model="item.name"/>
      <span ng-if="!isEditItem[$index]">{{item.name}}</span>
    </td>
    <td>
      <button ng-if="!isEditItem[$index]" ng-click="editItem($index)">Edit Item</button>
      <button ng-if="isEditItem[$index]" ng-click="saveItem($index)">Save Item</button> 
    </td>           
</tr>

在控制器中

$scope.isEditItem = [];

$scope.addItem = function() {
    $scope.items.unshift({});
    $scope.isEditItem[0] = true;
}

$scope.editItem = function($index) {
    $scope.isEditItem[$index] = true;
}

$scope.saveItem = function($index) {
    $scope.isEditItem[$index] = false;
}

因此，在上面的示例中，isEditItem数组包含项的编辑条件。当用户单击某个项目的编辑按钮时，请在index中填写isEditItem。当用户单击“保存”按钮时，将其设为false。

我只是想让你举例说明如何做到这一点。我想，您可以通过查看此示例来更新代码。

Plunker of the above example

如何在ng-repeat下启用文本框

3 个答案: