MVCの自動完成ドロップダウンリストに.jsonファイルをバインドする方法AngularJS

Question

.jsonファイルに都市名の大きなデータがあります.Mvcを使用して、すべての都市名を自動完全ドロップダウンリストにバインドしたい事前

Answer 1

のおかげで、それを行うにはどのような方法があるので、AngularJS

私はこのプラグインを利用することができます。使用方法は次のとおりです。

<angucomplete-alt id="members" 
    placeholder="Search members" 
    pause="400" 
    selected-object="selectedCity" 
    remote-url="http://myserver.com/api/user/find?s=" 
    remote-url-data-field="results" 
    title-field="name" 
    input-class="form-control form-control-small"/> 

サーバー側では、GETパラメータとして型指定された文字列を受け取ります。

Request.QueryString["type"]; 

サーバー機能は、次のJSON形式で結果を返す必要があります。

{ 
    results : [{'name': 'first city', 'name': 'second city'}] 
} 

第二オプション

あなたは、あなたにも、次のアプローチを使用することができ、静的なJSONファイルに固執する必要が場合。これはまた、すべての都市として高速で動作し、一度読み込まれた後、ローカルでフィルタリングされます。

<div angucomplete-alt id="ex1" 
    placeholder="Search cities" 
    maxlength="50" 
    pause="100" 
    selected-object="selectedCity" 
    local-data="cities" 
    search-fields="name" 
    title-field="name" 
    minlength="1" 
    input-class="form-control form-control-small" 
    match-class="highlight"> 
    </div> 

テンプレート

で

は、お使いのコントローラでこれを追加します。これは私がダウンし、簡単なドロップを使用しますが、問題は、私は時に今まで私オートコンプリートドロップダウン使用したいということであるとき、その作品が細かい自動complte目的

$scope.cities = []; 

$http.get('http://server/cities.json')..success(function(response) { 
    $scope.cities = response.data; 
}); 

Answer 2

ng-options="color.Name for color in Colors" 

<script type="text/javascript"> 
     var app = angular.module('MyApp', []) 
     app.controller('MyController', function ($scope, $window) { 
      $scope.Colors = [{ 
       Id: 1, 
       Name: 'Red' 
      }, { 
       Id: 2, 
       Name: 'Blue' 
      }, { 
       Id: 3, 
       Name: 'Green' 
      }]; 
     }); 
    </script> 

    <div ng-app="MyApp" ng-controller="MyController"> 
     <select ng-model="ddlColors" ng-options="color.Name for color in Colors track by color.Id"> 
     </select> 
    </div> 

Answer 3

コントローラー・コード

var app = angular.module('MyApp', []) 
    app.controller('MyController', function ($scope, $window) { 
     $scope.Fruits = [{ 
      Id: 1, 
      Name: 'Apple' 
     }, { 
      Id: 2, 
      Name: 'Mango' 
     }, { 
      Id: 3, 
      Name: 'Orange' 
     }]; 
    }); 

HTMLコード

 <label class="item item-input item-select"> 
     <div class="input-label" style="color:#387ef5;"> 
     Type of call : 
     </div> 
     <select name="fruitType" class="form-control" ng-change="getSectedTypeValue(selectedID)" ng-model="selectedID" ng-options=" fruitType as fruitType.Name for fruitType in Fruits track by fruitType.Id" value="{{fruitType.Id}}" required> 
     <option value=""> Select Call Type </option> 
     </select> 
    </label>