0

I'm putting info from an api into table, and i need to get the value from an input. Let's say that i got a list of payments (obtained from the api), and there's two options: to pay the total or pay a part.

This is part of my code:

function searchPayments(){
  $http.get('theApi')
  .then(function(data){
     $scope.payments = data.data.Response;
}

Then, on my html view:

<table class="table table-bordered">
   <thead>
      <tr>
         <th>Name</th>
         <th>Service</th>
         <th>Total</th>
         <th>Partial</th>
         <th>Amount</th>
      </tr>
   </thead>
   <tbody>
      <tr ng-repeat="pay in payments">
         <th>{{pay.Name}}</th>
         <th>{{pay.Service}}</th>
         <th>
           <input type="checkbox" name="totalCheck" class="form-control" 
                   ng-model="total" ng-disabled="partial"/>
         </th>
         <th>
           <input type="checkbox" name="partialCheck" class="form-control"
                  ng-model="partial" ng-disabled="total">
         </th>
         <th>
           <a ng-show="total">${{pay.AmountPay}}</a>
           <input type="text" class="form-control" placeholder="$"
                  ng-show="partial" style="width:100px;" id="importTo">
         </th>
      </tr>
   </tbody>
</table>

Here's the thing: if the user selects the "Total" checkbox, in Amount row will show the obtained amount (from the api), ad if selects the "Partial" checkbox, will appear a textbox where the user can write 'x' amount. Then, i have a button:

<button type="button" class="btn btn-primary"
         ng-click="getSpecificId(pay);associateThis()">
  Let's pay!
</button>

Which calls the next piece of code:

$scope.getSpecificId = function(x){
    $scope.specificInfo = x.AmountPay;
    //Here's where i catch the especific quantity of the record what i want to pay
}

$scope.associateThis = function(){

        if($('input[name="totalCheck"]').is(':checked')){
            $scope.qtyOn = $scope.specificInfo;
            console.log($scope.qtyOn);
        }
        else if($('input[name="partialCheck"]').is(':checked')){*/
            $scope.qtyOn = document.getElementById('importTo').value;
            console.log($scope.qtyOn);
        }
        else{
            alert("Select Total or Partial checkbox!");
        }
    }

My problem comes when the Partial checkbox is checked and hit the button, because only gets the writed value of the very first record (if the user selects this first record). In case the user selects another record, the value from that checkbox is empty.

Someone can help me to get the values, please? I'm using Javascript, AngularJs and Bootstrap.

Thanx in advance.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • btw , you need to have a radio button instead of checkbox ! – Atul Aug 17 '18 at 18:54
  • just give a ng-model to the importTo input box and use it $scope.importToValue. – Atul Aug 17 '18 at 19:04
  • You are using mix of jquery,js and angular at one time, try to use angular as much as possible if you are working on angular js project. – Atul Aug 17 '18 at 19:05
  • New AngularJS developers often do not realize that `ng-repeat`, `ng-switch`, `ng-view`, `ng-include` and `ng-if` all create new child scopes, so the problem often shows up when these directives are involved. This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models. – georgeawg Aug 17 '18 at 21:01

0 Answers0