html - 删除按钮未检测到第一个列表项

Question

选择第一个列表后，删除按钮并没有删除第一个列表。

请帮我解决这个问题。这是代码。

<div class="" ng-app="myApp" ng-controller="myController">
<table class="table table-striped table-condensed greyheader">
                      <tr>
                        <th width="2.6%">row</th>
                        <th width="7.6%">From</th>
                        <th width="7.6%">To</th>
                        <th width="4.6%">CPT</th>
                        <th width="4.6%">Diag</th>
                        <th width="4.6%">Unit</th>
                        <th width="5.6%">Amount</th>
                        <th width="4.6%">POS</th>
                        <th width="4.6%">TOS</th>
                        <th width="4.6%">Mod 1</th>
                        <th width="4.6%">Mod 2</th>
                        <th width="4.6%">Mod 3</th>
                        <th width="4.6%">Mod 4</th>
                        <th width="4.6%">Copay</th>
                        <th width="15.6%">Description</th>
                      </tr>
                      <tr ng-repeat="item in bill_cpt track by $index" ng-click="cptlist_item()" class="" ng-data-label="{{ $index }}" ng-class="{{ cptselect }}">
                        <td>{{ $index+1 }}</td>
                        <td>{{ item.cpt_bill_from }} </td>
                        <td>{{ item.cpt_bill_to }}</td>
                        <td>{{ item.cpt_bill_cpt }}</td>
                        <td>{{ item.cpt_bill_diag }}</td>
                        <td>{{ item.cpt_bill_unit }}</td>
                        <td>{{ item.cpt_bill_amount | currency }}</td>
                        <td>{{ item.cpt_bill_pos }}</td>
                        <td>{{ item.cpt_bill_tos }}</td>
                        <td>{{ item.cpt_bill_mod1 }}</td>
                        <td>{{ item.cpt_bill_mod2 }}</td>
                        <td>{{ item.cpt_bill_mod3 }}</td>
                        <td>{{ item.cpt_bill_mod4 }}</td>
                        <td>{{ item.cpt_bill_copay }}</td>
                        <td>{{ item.cpt_bill_description }}</td>
                      </tr>
                    </table>

                 <table class="table table-striped greyheader table-condensed responsiveTable">
                    <tbody>
                      <tr class="bg-grey">
                        <td width="6.6%"><label>From</label>
                          <input type="text" class="datepicker" ng-model="cpt_bill_from" /></td>
                        <td width="6.6%"><label>To</label>
                          <input type="text" class="datepicker" ng-model="cpt_bill_to" /></td>
                        <td width="6.6%"><label>CPT</label>
                          <input type="number" class="" ng-model="cpt_bill_cpt" /></td>
                        <td width="6.6%"><label>Diag</label>
                          <input type="number" class="" ng-model="cpt_bill_diag" /></td>
                        <td width="6.6%"><label>Unit</label>
                          <input type="number" class="" ng-model="cpt_bill_unit" /></td>
                        <td width="6.6%"><label>Amount</label>
                          <input type="number" class="" ng-model="cpt_bill_amount" /></td>
                        <td width="6.6%"><label>POS</label>
                          <input type="number" class=""  ng-model="cpt_bill_pos" /></td>
                        <td width="6.6%"><label>TOS</label>
                          <input type="number" class="" ng-model="cpt_bill_tos" /></td>
                        <td width="6.6%"><label>Mod1</label>
                          <input type="number" class="" ng-model="cpt_bill_mod1" /></td>
                        <td width="6.6%"><label>Mod2</label>
                          <input type="number" class="" ng-model="cpt_bill_mod2" /></td>
                        <td width="6.6%"><label>Mod3</label>
                          <input type="number" class="" ng-model="cpt_bill_mod3" /></td>
                        <td width="6.6%"><label>Mod4</label>
                          <input type="number" class="" ng-model="cpt_bill_mod4" /></td>
                        <td width="6.6%"><label>Copay</label>
                          <input type="number" class="" ng-model="cpt_bill_copay" /></td>
                        <td width="6.6%"><label>Description</label>
                          <input type="text" class="" ng-model="cpt_bill_description" /></td>
                      </tr>
                    </tbody>
                  </table>


                  <div class="modal-footer">
                <button type="button" class="btn btn-default">OK</button>
                <button type="button" class="btn btn-primary" ng-click="addBillCpt(item)">Add</button>
                <button type="button" class="btn btn-danger" ng-click="removeBill_cpt()">Delete</button>
              </div>
</div>



                <script>
var myApp = angular.module('myApp', []);

myApp.controller('myController', function($scope){

// add values in billing cpt list table

  $scope.bill_cpt= [
   {
    cpt_bill_from: 'July 23, 2016',
    cpt_bill_to: 'July 23, 2016',
    cpt_bill_cpt: 9925,
    cpt_bill_diag: 12,
    cpt_bill_unit: 1,
    cpt_bill_amount: 100.00,
    cpt_bill_pos: 1,
    cpt_bill_tos: 1 ,
    cpt_bill_mod1: 01,
    cpt_bill_mod2: 02,
    cpt_bill_mod3: 25,
    cpt_bill_mod4: 30,
    cpt_bill_copay: 35,
    cpt_bill_description: 'office/outpatient visit',
   },
   {
    cpt_bill_from: 'July 23, 2016',
    cpt_bill_to: 'July 23, 2016',
    cpt_bill_cpt: 1239925,
    cpt_bill_diag: 12,
    cpt_bill_unit: 1,
    cpt_bill_amount: 100.00,
    cpt_bill_pos: 1,
    cpt_bill_tos: 1 ,
    cpt_bill_mod1: 01,
    cpt_bill_mod2: 02,
    cpt_bill_mod3: 25,
    cpt_bill_mod4: 30,
    cpt_bill_copay: 35,
    cpt_bill_description: 'office/outpatient visit',
   }
  ] 


$scope.addBillCpt= function(){



      $scope.bill_cpt.push({
       cpt_bill_from: $scope.cpt_bill_from,
       cpt_bill_to: $scope.cpt_bill_to,
       cpt_bill_cpt: $scope.cpt_bill_cpt,
      cpt_bill_diag: $scope.cpt_bill_diag,
      cpt_bill_unit: $scope.cpt_bill_unit,
      cpt_bill_amount: $scope.cpt_bill_amount,
      cpt_bill_pos: $scope.cpt_bill_pos,
      cpt_bill_tos: $scope.cpt_bill_tos,
      cpt_bill_mod1: $scope.cpt_bill_mod1,
      cpt_bill_mod2: $scope.cpt_bill_mod2,
      cpt_bill_mod3: $scope.cpt_bill_mod3,
      cpt_bill_mod4: $scope.cpt_bill_mod4,
      cpt_bill_copay: $scope.cpt_bill_copay,
      cpt_bill_description: $scope.cpt_bill_description,
      });



       $scope.cpt_bill_from= '',
       $scope.cpt_bill_to= '',
       $scope.cpt_bill_diag= '',
       $scope.cpt_bill_unit= '',
       $scope.cpt_bill_amount= '',
       $scope.cpt_bill_pos= '',
       $scope.cpt_bill_tos= '',
       $scope.cpt_bill_mod1= '',
       $scope.cpt_bill_mod2= '',
       $scope.cpt_bill_mod3= '',
       $scope.cpt_bill_mod4= '',
       $scope.cpt_bill_copay= '',
       $scope.cpt_bill_description= ''

  }






  $scope.cptselect = "";
  $scope.cptlist_item= function(){
   $scope.list_id=  this.$index
     console.log($scope.list_id)

  };

  $scope.list_id = '';


  $scope.removeBill_cpt= function(){


   if($scope.list_id == ''){

     alert('Please select a list, Thank you');

   }
   else if ($scope.list_id == 0) {


    $scope.bill_cpt.splice($scope.list_id,1);
    $scope.list_id = '';

   }
   else{

     $scope.bill_cpt.splice($scope.list_id,1);
     $scope.list_id = '';
   }

   $scope.list_id = '';
  }



});

</script>
</body>
</html>

选择第一个列表后，删除按钮并没有删除第一个列表。请帮我解决这个问题。我通过单击选择列表。并按下删除按钮后。它被删除了。但它不适用于表的第一个列表。

Answer 1

我想在第一次运行时你将 $scope.list_id = ''; 设置为 null 所以它不会设置直到你选择一个列表并且你只能删除一个列表如果 ID 是基于设置的对此:

  $scope.list_id = '';
  $scope.removeBill_cpt= function(){

  if($scope.list_id == ''){
    alert('Please select a list, Thank you');
  } else if ($scope.list_id == 0) {
    //do the removeing.
  }
  }