如何在ng-click和ng-show中使用表达式

时间:2016-10-19 11:08:09

标签: javascript angularjs

我正在尝试为表格创建一个可扩展的行。我没有收到任何错误消息,但它没有按预期工作。我怀疑我在这里使用ng-show的表达式有什么问题吗? plunker

我的代码:

<table class='table'>
    <thead>
      <tr>
        <th>name</th>
        <th>itemOne</th>
        <th>itemTwo</th>
      </tr>
    </thead>
    <tbody ng-repeat="data in tableData| orderBy:'-clintonValuemain'">
      <tr>
        <td>
          <button ng-show="data.expand" ng-click='data.expand = true'>+</button>
          <button ng-show="!data.expand" ng-click='data.expand = false'>-</button>
          <input type="checkbox" class='checkbox'>
          <a rel="noopener" target="_blank" href={{data.url}}>
        {{data.name}}
        </a>
        </td>
        <td>{{data.valueMain}}</td>
        <td>{{data.tValue}}</td>
        <tr>
          <tr ng-show="data.expand" ng-repeat="subs in data.subvalues| orderBy:'-clintonValuesub'" >
            <td>
              {{subs.name}}
            </td>
            <td>
              {{subs.valueSub}}
            </td>
            <td>
              {{subs.tValue}}
            </td>
          </tr>
        </tr>

      </tr>
    </tbody>
  </table>

1 个答案:

答案 0 :(得分:3)

试试这个

<button ng-show="data.expand" ng-click='data.expand = false'>-</button>
<button ng-show="!data.expand" ng-click='data.expand = true'>+</button>

更新了plunker

https://plnkr.co/edit/sJDFAp1KDvhYh8K3q7z2?p=preview