Как отобразить ввод как x-editable?

Question

Я хочу сделать редактируемое руководство с помощью ng-if в AngularJS, но когда я нажимаю на одну из ячеек таблицы, все ячейки таблицы в Джамла Пембеляна отображают форму ввода.

до нажатия :

после нажатия на одну ячейку :

Мой вопрос : как отобразить ввод формы, когда я щелкаю одну ячейку

Мой HTML-код:

  <td ng-if="kons_makanan == 0" class="middle-vertical text-center" 
      ng-click="change_jumlah(bu.id)">{{jumlah_makanan}}</td>
  <td ng-if="kons_makanan == 1">
    <div class="form-inline">
      <input type="text" class="form-control" number-masking 
             ng-model="jumlah_makanan" style="width:auto;">
      <a class="btn btn-flat btn-sm btn-success"
         ng-click="update_jumlah_makanan(bu.id)" title="Tambah">
        <i class='fa fa-plus'></i>
      </a>
    </div>
  </td>

Мой код AngularJS:

$scope.change_jumlah = function(no) {
    $scope.kons_makanan = 1;
}

$scope.update_jumlah_makanan = function(no) {
    $scope.kons_makanan = 0;
}

Answer 1

Извините всех, я пытался и был успешным

HTML код:

<td ng-if="kons_makanan != $index" class="middle-vertical text-center" 
  ng-click="change_jumlah($index)">{{jumlah_makanan}}</td>

<td ng-if="kons_makanan == $index">
 <div class="form-inline">
  <input type="text" class="form-control" number-masking 
  ng-model="jumlah_makanan" style="width:auto;">
  <a class="btn btn-flat btn-sm btn-success"
     ng-click="update_jumlah_makanan(bu.id)" title="Tambah">
    <i class='fa fa-plus'></i>
  </a>
</div>

AngularJS код:

$scope.change_jumlah = function(no) {
   $scope.kons_makanan = no;
}

$scope.update_jumlah_makanan = function(no) {
   $scope.kons_makanan = -1;
}

Спасибо всем запытаясь помочь мне