事先鍵入的內容獲取從URL的JSON值不工作數據

下面是角預輸入我的HTML代碼：事先鍵入的內容獲取從URL的JSON值不工作數據

<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網址的JSON格式如下：

[{ 
"ifsc": "asdads", 
"bank_id": 110, 
"bank_name": "abc bank", 
"branch": "BANGALORE", 
"address": "ewrwerewr", 
"city": "BANGALORE", 
"district": "BANGALORE URBAN", 
"state": "KARNATAKA" 
}]

任何想法如何修改此？卡住了。請幫幫我。

來源

2016-09-24 Preety Singh

@zmbq你編輯我的代碼你知道我的代碼有什麼問題嗎？ –

你是否使用了AngularJS UI Bootstrap的typeahead [這裏]（https://angular-ui.github.io/bootstrap/#typeahead）？如果是這樣，你需要在搜索輸入標記中將'typeahead'更改爲'uib-typeahead' – segFault

@zmbq是的，我正在使用這一個 –

您在使用預輸入指令錯誤的，它的工作方式是，它需要在要申請$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函數從它返回的承諾對象。

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

注：如果您使用的角度UI的引導1.x版本+，那麼你必須在你的情況下使用uib-前綴的每一個UI的引導指令之前像它會是uib-typeahead，而不是typeahead。

來源

2016-09-24 18:54:08

我正在使用 –

@PreetySingh然後你必須使用'uib-typeahead'。 :) –

控制檯中的錯誤:(參數'ServicesCtrl'不是一個函數，得到字符串 –

事先鍵入的內容獲取從URL的JSON值不工作數據

回答

相關問題