dataList automatisch füllen andere Felder, wenn eine Option ausgewählt ist - AngularJs

Question

Ich habe eine Datenliste von Namen, ich möchte die Telefonnummer und die Ort Felder automatisch ausfüllen, wenn der Name ausgewählt ist, für jetzt, die Felder bekommen ihre Werte von Tive auf dem Winkelregler, indem sie auf der < td> Spalte klicken, dies ist mein Code:

HTML QUELLE:

<div ng-controller="facture_retour""> 
    <table> 
     <thead> 
      <tr> 
       <td><strong>Client</strong></td> 
       <td> 
        <input type="text" id="client_List" list="clientList" /> 
        <datalist id="clientList"> 
        <option ng-repeat="fc in facture_client_retour" data-tele="{{fc.phone_number}}" data-location="{{fc.location}}" data-id="{{fc.id}}" value="{{fc.fname}} {{fc.lname}} |{{fc.code}}" id="optIdFc"> 
       </datalist> 
       </td> 
      </tr> 
      <tr> 
       <td ng-click="getClientAttr();"><strong>Telephone</strong></td> 
       <td>{{clientPhoneNumber}}</td> 
      </tr> 
      <tr> 
       <td><strong>Location</strong></td> 
       <td>{{clientLocation}}</td> 
      </tr> 
     </thead> 
    </table> 
</div> 

ich keine Fehler bin immer und es funktioniert gut, wenn Klicken Sie auf die < td> um die Funktion getClientAttr() aufzurufen, aber ich muss diese Funktion automatisch aufrufen, wenn die Option ausgewählt ist. JS QUELLE:

app.controller('facture_retour',function($scope, $http){ 
     $scope.facture_client_retour; 
     angular.element(document).ready(function() { 
      $scope.getAllClients(); 
    }); 


/*This function is responsible of getting all clients Name and display them 
in the data-list */ 
$scope.getAllClients=function(){ 
      var url = '../php/mainPageFacture.php'; 
      var data = {"function":"getAllClients"}; 
      var options={ 
       type : "get", 
       url : url, 
       data: data, 
       dataType: 'json', 
       async : false, 
       cache : false, 
       success : function(response,status) { 
        $scope.facture_client_retour = response; 
        $scope.$apply(); 
       }, 
       error:function(request,response,error){ 
        // alert("Error: " + error + ". Please contact developer"); 
        swal({ 
         title: "Please contact your software developer", 
         text: "ERROR: " + error, 
         type: "warning", 
         showCancelButton: false, 
         confirmButtonClass: "btn-info", 
         confirmButtonText: "Ok", 
         closeOnConfirm: true 
        }); 
       } 
      }; 
      $.ajax(options); 
      $scope.call=getClientAttr(); 
     } 

/*this function getting the other fields (phone number,location) values and 
display them by clicking on <td>*/ 
     $scope.getClientAttr=function(){ 
      //alert("here we go"); 
      var val = $('#client_List').val() 
      var client_phone_number= $('#clientList option').filter(function() { 
       return this.value == val; 
      }).data('tele'); 

      $scope.clientPhoneNumber=client_phone_number; 
       var val = $('#client_List').val() 
       var client_location= $('#clientList option').filter(function() { 
        return this.value == val; 
       }).data('location'); 
      $scope.clientLocation=client_location; 
     } 

    }); 

Answer 1

ein ng-Modell auf Ihre Eingabe hinzufügen

<input type="text" ng-model="Data" id="client_List" list="clientList" /> 

Sie ng Klick auf Ihre Datalist-Option hinzufügen und setzen ausgewählte Wert

<datalist id="clientList"> 
    <option ng-repeat="fc in facture_client_retour" data-tele="{{fc.phone_number}}" data-location="{{fc.location}}" data-id="{{fc.id}}" value="{{fc.fname}} {{fc.lname}} |{{fc.code}}" id="optIdFc" ng-click="Data = fc"> 
</datalist> 

zu modellieren und Legen Sie die Werte für Standort und Telefonnummer in Ihrem Controller fest, wenn sich das Modell ändert

$scope.$watchCollection('Data', function(newValue, oldValue) { 
    if(newValue != undefined) 
     angular.forEach($scope.data, function(value, key) { 
     if(value.name == newValue){ 
      $scope.clientPhoneNumber = value.phone_number; 
      $scope.clientLocation = value.location; 
     } 
     }); 
    });