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

는 귀하의 의견에 NG-모델을 추가

추가 할 수

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

하여 DataList에 옵션으로 NG를 클릭하고 설정을 선택 값은

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

을 모델링하고 모델 변경시 컨트롤러의 위치 및 전화 번호 값 설정

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