dataListオプションが選択されたときに他のフィールドを自動入力する - AngularJs

Question

名前のデータリストがあります。名前が選択されたときに電話番号と場所フィールドを自動入力したい場合は、 < TD>列をクリックすることにより、角度コントローラ上のスコープからの値が、これは私のコードです：

HTMLソース：

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

私はエラーを取得していないのです、それは時に正常に動作しますをクリックしてくださいtd>はgetClientAttr（）関数を呼び出しますが、オプションが選択されているときにこの関数を自動的に呼び出す必要があります。 JSのSOURCE：

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

はあなたが

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

をモデル化するために、あなたのDataListコントロールオプションとセット選択した値にNGクリック追加することができ、あなたの入力に

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

をNG-モデルを追加し、モデルが変更されたときにコントローラの位置と電話番号の値を設定します

$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; 
     } 
     }); 
    });