Search code examples
htmlangularjsangular-ng-if

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


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


Solution

  • 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>