选择选项时，dataList会自动填充其他字段 - AngularJs

Posted 2021-05-02

我有一个名称的数据列表，我想在选择名称时自动填写电话号码和位置字段，现在，字段通过单击<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来源：

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

    });

答案

在输入中添加ng-model

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

您可以添加ng-click到您的datalist选项并将所选值设置为model

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