Question

我正在研究angularjs并遇到一个严重的问题，考虑我通过html表单添加公司详细信息，然后我做了一个条款，用户可以为该公司添加多个所有者[因为公司可以以合作伙伴的形式拥有多个所有者]。现在，我已经给出了文本框，以填补公司所有者的信息，并随之添加＆＃34;添加＆＃34;提供按钮，在单击添加按钮时，一个对象被添加到companyOwnerList，然后angularjs在内部追加一个新行，其中包含companyOwnerList中的数据（因为我使用了ng-repeat）。现在问题是我想禁用用户添加的所有行，并为他们提供选项＆＃34;编辑＆＃34;。这些行根本没有被禁用。我无法找到在angularjs中执行此操作的逻辑。[在jQuery中我可以轻松地完成它但无法在angularjs中实现它]。 我想禁用包含＆＃39; bobby＆＃39;的行＆＃39; bobby@abc.com' （请参阅图片）请帮忙谢谢.. 我提供了一些代码片段，以便解决问题 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}}" id="name">
        </td>

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

        <td class="col-lg-3"><input type="Text" class="form-control" 
            data-ng-model="c.clientOwnerPhone"
            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="";
    }

Answer 1

你可以试试这个

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

控制器中的

$scope.IsDisabled(c){
  return c.clientOwnerName == "Bobby"; //or other conditions
}

更新

您可以尝试以下方法。你可以保留一个标志，并在有“Bobby”值后设置它，然后你可以使用$index来确保所有后续行都被禁用。

HTML

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

控制器

$scope.disabledIndex = 1000; //some large number

$scope.IsDisabled(c, i){

  if( i > $scope.disabledIndex) return true;

  if(c.clientOwnerName == "Bobby")
    $scope.disabledIndex = i;

  return c.clientOwnerName == "Bobby"; //or other conditions
}

Answer 2

对要有条件启用/禁用的项目使用ng-disabled指令。

ng-disabled="expression"

https://docs.angularjs.org/api/ng/directive/ngDisabled

在ng-repeat

2 个答案: