Question

在文本框中，我想根据用户输入密钥显示客户名称，如果用户输入A字母，那么所有客户名称都以搜索框中的A字母显示开头。因为我正在使用“data-list”

但现在的问题是，如果我正在写选项值=“customer.Name”，它会根据我的要求在文本框中显示客户名称，但同时将客户名称绑定到ng-模型。

我希望客户对象绑定到ng-model

<div ng-app="myApp" ng-controller="myCtrl">

<div class="form-group">
                        <label class="control-label">Customer Name :</label> 
                        <input list="browsers" name="browser" ng-model="selectedcustomer" >

                        <datalist id="browsers">
                            <option ng-repeat="customer in customers" 
                                 value="{{customer.Name}}" >{{customer.Name}}
                                </option>
                        </datalist>
                    </div>

</div>

通过编写选项值=“{{customer}}”，它会将所选客户绑定到 ng-model ，但同时会在文本中显示所有客户对象我不想要的框我只想在文本框中显示客户名称

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.customers=[{id :1,Name :'Mahesh',city:'Pune',state:'Maharashtra'},
                  {id :2,Name:'Mayur',city:'surat',state:'Gujrat'},
                  {id :3,Name:'Ram',city:'mumbai',state:'Maharashtra'}];
});

Answer 1

Angular材质中有一个很好的组件叫做md-autocomplete。如果您使用此组件，它将使您的生活更轻松。

以下是组件的链接：auto-complete和API 这是指向demos

的链接

Answer 2

我使用ng-Autocomplete来完美而轻松地完成您正在寻找的内容。

如何在datalist选择的选项ng-repeat中将对象绑定到ng-model

2 个答案: