通过单击行中的任意位置来选择包含链接和按钮的行

问题描述：

我有一个管理联系人的AngularJS应用程序。主页面列出了具有不同行的表格的联系人列表。当用户点击该行的任何地方（除了编辑链接和删除最后一列联系人的按钮外），他必须重定向到我的页面的一个部分（联系详细信息）。通过单击行中的任意位置来选择包含链接和按钮的行

我试图做到这一点。它的工作，但我的按钮删除联系人不起作用。我怎样才能让这个按钮起作用？

这里是我的模板：

<table ng-show="contacts.length" class="table table-striped table-hover spacer"> 
    <thead> 
    <tr> 
     <th class="colPerson"> 
     <a href="" ng-click="personsSort('PERSON')">Person</a> 
     <span class="hSpacer" ng-class="cssChevronsTri('PERSON')"></span> 
     </th> 
     <th class="colCompany"> 
     <a href="" ng-click="personsSort('COMPANY')">Company</a> 
     <span class="hSpacer" ng-class="cssChevronsTri('COMPANY')"></span> 
     </th> 
     <th class="colDate"> 
     <a href="" ng-click="personsSort('REQUESTTRUEDATE')">Date</a> 
     <span class="hSpacer" ng-class="cssChevronsTri('REQUESTTRUEDATE')"></span> 
     </th> 
     <th class="colDescription"> 
     <a href="" ng-click="personsSort('REQUESTDESCRIPTION')">Description</a> 
     <span class="hSpacer" ng-class="cssChevronsTri('REQUESTDESCRIPTION')"></span> 
     </th> 
     <th class="colAction">Action</th> 
    </tr> 
    </thead> 

    <tbody ng-repeat="contact in contacts | filter:searchText | orderBy:champTri:triDescendant" ng-click="selContact(contact,contact.ID)"> 
    <tr class="clickable"> 
     <td class="colPerson" ng-class="{sel:selIdx==$index}"><a href="#/view-contacts/{{contact.ID}}">{{contact.PERSON}}</a></td> 
     <td class="colCompany">{{contact.COMPANY}}</td> 
     <td class="colDate">{{contact.REQUESTTRUEDATE | date:'dd/MM/yyyy'}}</td> 
     <td class="colDescription">{{contact.REQUESTDESCRIPTION}}</td> 
     <td class="colNbRequest">{{contact.NBREQUEST}}</td> 

     <td class="colAction"> 
     <a href="#/edit-contacts/{{contact.ID}}" class="inline btn btn-primary"> 
      <span class="glyphicon glyphicon-pencil"></span> 
     </a> 
     <button class="inline btn btn-default" data-ng-click="confirmDelPerson(contact.ID)"> 
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
     </td> 
    </tr> 
    </tbody> 
</table>

如果我点击该行的任何地方显示看到详细信息的页码。如果我点击链接上的最后一列编辑页面进行编辑，它同样可行。但是，如果我点击按钮删除它不起作用（看到细节页面出现）。

这里是我的控制器的一部分：在<td>标签

app.controller('ctrlContacts', function ($scope, ContactService) { 
    $scope.contacts = null; 
    $scope.searchButtonText = "Search"; 
    $scope.test = false; 
    $scope.reSearch = function() { 
    // simulate search 
    $timeout(function() { 
     // search is complete 
    }, 2000); 
    } 
    $scope.search = function (searchText) { 
    if (!searchText.length) { 
     //alert("searchText empty"); 
    } 
    if (searchText.length > 2) { 
     $scope.loading = true; 
     $scope.test = true; 
     $scope.searchButtonText = "Loading..."; 
     ContactService.fastSearch(searchText).success(function (contacts) { 
     var length = contacts.length; 
     $scope.loading = false; 
     if (length == 0) { 
      $scope.searchButtonText = "No result"; 
     } else { 
      $scope.searchButtonText = length + " results found"; 
     } 
     // For the orderby date 
     for (var i = 0; i < length; i++) { 
      if (contacts[i].REQUESTTRUEDATE != "") { 
      contacts[i].REQUESTTRUEDATE = new Date(contacts[i].REQUESTTRUEDATE.replace(/-/g, "/")); 
      } else { 
      contacts[i].REQUESTTRUEDATE = null; 
      } 
     } 
     $scope.contacts = contacts; 
     $scope.champTri = 'PERSON'; 
     $scope.selIdx = -1; 
     $scope.selContact = function (contact, idx) { 
      $scope.selectedContact = contact; 
      $scope.selIdx = idx; 
      window.location = "#/view-contacts/" + idx; 
     } 
     $scope.isSelContact = function (contact) { 
      return $scope.selectedContact === contact; 
     } 
     }); 
    } else { 
     $scope.contacts = null; 
    } 
    } 
    // recherche 
    $scope.searchText = null; 
    $scope.razRecherche = function() { 
    $scope.searchText = null; 
    } 
    // tri 
    $scope.champTri = null; 
    $scope.triDescendant = false; 
    $scope.personsSort = function (champ) { 
    if ($scope.champTri == champ) { 
     $scope.triDescendant = !$scope.triDescendant; 
    } else { 
     $scope.champTri = champ; 
     $scope.triDescendant = false; 
    } 
    } 
    $scope.cssChevronsTri = function (champ) { 
    return { 
     glyphicon: $scope.champTri == champ, 
     'glyphicon-chevron-up': $scope.champTri == champ && !$scope.triDescendant, 
     'glyphicon-chevron-down': $scope.champTri == champ && $scope.triDescendant 
    }; 
    } 
    $scope.confirmDel = function (id) { 
    if (confirm('Do you want to delete this contact?')) { 
     ContactService.delContact(id).success(function() { 
     ContactService.getContact().success(function (contacts) { 
      $scope.contacts = contacts; 
     }); 
     }); 
    } 
    $scope.orderby = orderby; 
    }; 
});

什么确认（'您想删除此联系人吗？'）返回？ – Vivz

答

这可能是这个

<tbody ... ng-click="selContact(contact,contact.ID)">

尝试把这个NG-点击。

<tbody ng-repeat="contact in contacts | filter:searchText | orderBy:champTri:triDescendant" > 
    <tr class="clickable"> 
     <td ng-click="selContact(contact,contact.ID)" class="colPerson" ng-class="{sel:selIdx==$index}"><a href="#/view-contacts/{{contact.ID}}">{{contact.PERSON}}</a></td> 
     <td ng-click="selContact(contact,contact.ID)" class="colCompany">{{contact.COMPANY}}</td> 
     <td ng-click="selContact(contact,contact.ID)" class="colDate" >{{contact.REQUESTTRUEDATE | date:'dd/MM/yyyy'}}</td> 
     <td ng-click="selContact(contact,contact.ID)" class="colDescription">{{contact.REQUESTDESCRIPTION}}</td> 
     <td ng-click="selContact(contact,contact.ID)" class="colNbRequest">{{contact.NBREQUEST}}</td> 

     <td class="colAction"> 
     <a href="#/edit-contacts/{{contact.ID}}" class="inline btn btn-primary"> 
      <span class="glyphicon glyphicon-pencil"></span> 
     </a> 
     <button class="inline btn btn-default" data-ng-click="confirmDelPerson(contact.ID)"> 
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
     </td> 
    </tr> 
    </tbody>

此外，我建议你使用Flex和不<table>标签，我已经有很多与此标签的问题。

通过单击行中的任意位置来选择包含链接和按钮的行

相关推荐