使用AngularJS编辑特定的div

时间:2014-07-25 11:53:47

标签: javascript angularjs click

如何使用Angular编辑特定的div?我的页面上有一个div的沮丧,包含带有数据的表格。当我点击特定div上的编辑按钮时,我希望它可以编辑。

如何将click事件绑定到该特定div?我现在做了类似的事情:

<div ng-show="summary.abbData.service_type == 'NaoLan'" class="col-md-6" style="background-color: #ffffff; width: 325px; margin-left: 15px;">
    <h5 class="bg-primary rmpad15" style="margin-top: 1px; padding: 5px;">{{summary.abbData.service_type}}<button type="button" ng-click="editAbb(customer.id)" class="btn btn-default btn-xs" style="float: right; margin-top: -3px;"><span class="glyphicon glyphicon-pencil"></span></button></h5>
    <table class="table table-condensed pad1">
    <tbody>
        <tr>
            <td><strong>Hastighet</strong></td><td>{{summary.abbData.service}}</td>
        </tr>
        <tr>
            <td><strong>Läghenhetsnr</strong></td><td>{{summary.abbData.apartment}}</td>
        </tr>
        <tr>
            <td><strong>Månadsavgift</strong></td><td>{{summary.abbData.month_fee}}kr</td>
        </tr>
        <tr>
            <td><strong>Anslutningsavgift</strong></td><td>{{summary.abbData.conn_fee}}kr</td>
        </tr>
        <tr>
            <td><strong>Bindningstid</strong></td><td>{{summary.abbData.fixation}}mån</td>
        </tr>
        <tr>
            <td><strong>Registreringsdatum</strong></td><td>{{summary.abbData.reg_date}}</td>
        </tr>
    </tbody>
    </table>
</div>

如您所见,我有ng-click,但我不知道如何将div绑定到click事件。任何人吗?

1 个答案:

答案 0 :(得分:0)

请见jsbin.com/zataro/2/edit?html,output

<tr>
    <td><strong>Läghenhetsnr</strong>
    </td>
    <td>
      <span ng-hide="edit.apartment">{{summary.abbData.apartment}}</span>
      <input ng-model="summary.abbData.apartment" type="text" ng-show="edit.apartment" />
    </td>
    <td>
      <button ng-click="edit.apartment=!edit.apartment">
        <span ng-show="!edit.apartment">Edit</span>
        <span ng-show="edit.apartment">Save</span> 
      </button>
  </tr>