how to show a table tr `` with double click? | angular js

Question

Status: I have a view where user double click a certain row to edit the table data.

VIEW:

<table>
<!-- give the modal value on doble click to be used as condition in the ng-show -->
  <tbody  ng-model="facture_details">
       <tr ng-if="facture_details == 'editMode'" ng-repeat="user in selectedFacture">
          <td>
            <input type="checkbox" ng-model="user.selected" />
          </td>
          <td data-title="Name">{{ user.name }}</td>
          <td data-title="Last Name" data-field="lastName">{{ user.lastName }}</td>
          <td><a class="btn btn-default" ng-click="edit(user)"><i class="icon-pencil"></i>Edit</a>
          </td>
            <div>
            <tr>
              <td>{{ user.name }} {{ user.lastName }}</td>
              <td>{{ user.name }} {{ user.lastName }}</td>
            </tr>
          </div>
      </tr>
  </tbody>
</table>

So on double click i want to show the tr, i tried ng-show but it's not working too. Thanks in advance

no, my view is different than the demo you provide!, i am still not have the solution — Ali, Apr 08 '18 at 20:19

Sajeetharan · Accepted Answer · 2018-04-08T05:40:56.577

With ng-if if you need to check the type also, you need to use ===

 <div ng-if="facture_details === 'editMode'" >

also set on ng-dblclick as,

  <tr ng-repeat="sf in selectedFacture" ng-dblclick="facture_details='editMode'">

DEMO

var app = angular.module('testApp',[])
app.controller('testCtrl',function($scope){
  $scope.selectedFacture = [{
      name: "Joe",
      lastName: "Carter"
    }, {
      name: "Bob",
      lastName: "Barker"
    }, {
      name: "Peter",
      lastName: "Griffin"
    }, {
      name: "Don",
      lastName: "Cherry"
    }, {
      name: "Bobby",
      lastName: "Fillet"
    }, {
      name: "Joey",
      lastName: "Diaz"
    }, {
      name: "Zoe",
      lastName: "Dejavous"
    }, {
      name: "Tom",
      lastName: "Jones"
    }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<tbody>
  <table ez-table="users" data-count="4">
  <button ng-dblclick="facture_details='editMode'">click</button>
       <tr ng-if="facture_details == 'editMode'" ng-repeat="user in selectedFacture">
        <td>
          <input type="checkbox" ng-model="user.selected" />
        </td>
        <td data-title="Name">{{ user.name }}</td>
        <td data-title="Last Name" data-field="lastName">{{ user.lastName }}</td>
        <td><a class="btn btn-default" ng-click="edit(user)"><i class="icon-pencil"></i>Edit</a>
        </td>
      </tr>
    </table> 
 
</tbody>
</body>

well, i did check your demo, so my code is a little bit difference, because i have a `tr` inside the `tr` so maybe this leads my code not to work?! — Ali, Apr 08 '18 at 05:54
so as i am new to the stackover flow i don't know how to provide a plunker, so updated my question fit with your exampler — Ali, Apr 08 '18 at 06:13

how to show a table tr `` with double click? | angular js

1 Answers1