Question

我有一个管理联系人的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>

如果我点击该行的任何位置，则会显示用于查看详细信息的页面。如果我点击链接的最后一列来编辑页面进行编辑，它同样有效。但是，如果我点击按钮删除它不起作用（显示详细信息的页面）。

这是我的控制器的一部分：

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;
  };
});

Answer 1

可能是这个

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

尝试将此ng-click放在<td>标签中。

<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>标签，我对这个标签有很多问题。

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

1 个答案: