下面是我的 Angular typeahead 的 HTML 代码:
<div class="form-group">
<select name="" class="form-control" ng-model="city" ng-change="onChange(e)" id="city">
<option value="DELHI">DELHI</option>
<option value="BANGALORE">BANGALORE</option>
<option value="GOA">GOA</option>
<option value="KOLKATA">KOLKATA</option>
<option value="PUNJAB">PUNJAB</option>
</select>
</div>
<input type="search" name="" ng-model="bankName" typeahead='bank_name as bankName | filter:$viewValue | limitTo:8' id="input" class="form-control" value="" placeholder="Search" required="required" title="">
<table class="table table-hover">
<thead>
<tr>
<th>IFSC</th>
<th>BANK ID</th>
<th>BANK NAME</th>
<th>BRANCH</th>
<th>ADDRESS</th>
<th>CITY</th>
<th>DISTRICT</th>
<th>STATE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="service in services">
<td>{{service.ifsc}}</td>
<td>{{service.bank_id}}</td>
<td>{{service.bank_name}}</td>
<td>{{service.branch}}</td>
<td>{{service.address}}</td>
<td>{{service.city}}</td>
<td>{{service.district}}</td>
<td>{{service.state}}</td>
</tr>
</tbody>
</table>
下面是JS文件:
var app = angular.module('bankBranch', ['ui.bootstrap'])
.controller('ServicesCtrl', ['$scope', '$http', function($scope, $http){
$scope.bankUrl = "https://someweb.com/api/bank_branches?offset=0&limit=50&city=";
$scope.city = 'BANGALORE';
var bankName = '$scope.bank_name';
var cities = '$scope.city';
$scope.getdata = function(){
$http.get($scope.bankUrl+$scope.city).then(function(response){
$scope.services = response.data;
});
}
$scope.onChange = function(e){
$scope.getdata();
}
$scope.getdata();
}]);
问题是我正在尝试获取输入字段中的分支名称,当我输入下表数据时,应该根据该名称进行过滤。 onChange 函数适用于选择框。 api url的JSON格式如下:
[{
"ifsc": "asdads",
"bank_id": 110,
"bank_name": "abc bank",
"branch": "BANGALORE",
"address": "ewrwerewr",
"city": "BANGALORE",
"district": "BANGALORE URBAN",
"state": "KARNATAKA"
}]
知道如何修改它吗?被卡住了。请帮助我。
最佳答案
您在使用 typeahead 指令时犯了一个错误,它的工作方式是,它需要一个 Promise 对象,您将在该对象上应用 $viewValue
过滤器
<input type="search" name="" ng-model="bankName"
typeahead='bank_name for bankName in getdata()'
id="input" class="form-control" value=""
placeholder="Search" required="required" title=""/>
因此,让我们更改您的 $scope.getData
函数以从中返回 Promise 对象。
$scope.getdata = function(){
return $http.get($scope.bankUrl+$scope.city).then(function(response){
$scope.services = response.data;
return $scope.services;
});
}
$scope.onChange = function(e){
return $scope.getdata();
}
Note: If you are using Angular ui-bootstrap version 1.X+ then you have to use
uib-
prefix before each ui-bootstrap directive like in your case it would beuib-typeahead
instead oftypeahead
.
关于javascript - Typeahead 从 url json 值获取数据不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39679615/