单击按钮并关闭另一个按钮

Question

代码如下：

 <table>
        <thead style="background-color: lightgray;">
          <tr>
            <td style="width: 30px;"></td>
            <td>
              Name
            </td>
            <td>Gender</td>
          </tr>  
        </thead>
        <tbody>
          <tr ng-repeat-start="person in people">
            <td>
              <button ng-if="person.expanded" ng-click="person.expanded = false">-</button>
              <button ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
            </td>
            <td>{{person.name}}</td>
            <td>{{person.gender}}</td>
          </tr>
          <tr ng-if="person.expanded" ng-repeat-end="">
            <td colspan="3">{{person.details}}</td>
          </tr>
        </tbody>
      </table>

笨蛋：

http://plnkr.co/edit/yYq1dt?p=preview

我想做什么：当我点击 ex 时。 "Bob" 信息会崩溃。然后，当我单击另一个人时，我想关闭 "Bob"。

Answer 1

这里是对 link 中给出的代码的编辑。只需调用使扩展选项卡为 false 的函数即可。

HTML

    <tbody>
      <tr ng-repeat-start="person in people">
        <td>
          <button ng-if="person.expanded" ng-click="expand(person)">-</button>
          <button ng-if="!person.expanded" ng-click="expand(person)">+</button>
        </td>
        <td>{{person.name}}</td>
        <td>{{person.gender}}</td>
      </tr>
      <tr ng-if="person.expanded" ng-repeat-end="">
        <td colspan="3">{{person.details}}</td>
      </tr>
    </tbody>

JS

function repeatTest($scope) {
  $scope.people = [
    {name: "Bob", gender: "Male", details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nisi quis mi tincidunt luctus ut quis nunc. Nam non risus tincidunt risus sodales condimentum. Morbi sed gravida elit. Nunc a turpis vestibulum elit posuere blandit. Phasellus luctus lectus non porta auctor. Etiam pellentesque imperdiet posuere. Nullam adipiscing congue nisl, in vulputate odio ornare ac."},
    {name: "Jane", gender: "Female", details: "Maecenas quis sodales lectus, vitae convallis ipsum. Ut ac viverra tellus. Quisque vulputate, orci placerat eleifend scelerisque, eros nunc rutrum odio, pharetra mattis leo neque vel eros. Cras id purus nec lorem vehicula rutrum a vel arcu. Quisque eget euismod augue. Integer volutpat auctor lorem, quis lacinia nisl tempus nec. Nunc fringilla, odio eget molestie varius, tortor turpis dignissim lacus, sed varius nunc velit eu turpis. Etiam sed congue diam. In ornare elit nec dolor faucibus ornare. Ut eget erat vel elit tristique iaculis. Maecenas et semper lorem. Nam mollis ante et ipsum vestibulum posuere. Ut non purus non risus tempor vulputate et vitae ipsum. Mauris et sem sit amet quam pulvinar fringilla."},
    {name: "Bill", gender: "Male", details: "Quisque rhoncus scelerisque sapien, tempor vestibulum dui tincidunt eu. Maecenas scelerisque, dolor sed vehicula pulvinar, ligula erat ornare arcu, in dictum ipsum libero vel est. Donec porttitor venenatis lacus, a laoreet orci. Proin quam mi, ultrices in ullamcorper vel, malesuada suscipit lectus. Nam faucibus commodo quam, auctor vehicula felis condimentum quis. Phasellus tempor molestie enim, at vehicula justo auctor eu. Pellentesque venenatis elit eu malesuada fringilla."}
  ];
  $scope.expand = function(selectedperson) {

    var boolexpansion = !selectedperson.expanded;

    angular.forEach($scope.people, function(person) {
      person.expanded = false;
   });
   if(boolexpansion) {
     selectedperson.expanded = !selectedperson.expanded;
   }
  }
}

Answer 2

您需要在崩溃事件期间迭代 $scope.people 以关闭所有其他事件。

应该是，在HTML中：

<button ng-if="person.expanded" ng-click="person.expanded = false">-</button>
<button ng-if="!person.expanded" ng-click="collapseExpand(person)">+</button>

在控制器中：

$scope.collapseExpand = function(currentPerson){
  $scope.people.forEach(function(person) {
      person.expanded = false; //make all person collapse
    });
  currentPerson.expanded  = true; //make current person expand
}

单击按钮并关闭另一个按钮

Click on button and close another button

angularjs

html-table

collapse

expandable

HTML

JS