Question

我在.json文件中有大量的城市名称数据，我想通过使用Mvc AngularJS将所有城市名称绑定到我的自动完成下拉列表，所以有任何方法可以做到这一点，提前谢谢

Answer 1

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 2

控制器代码

   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>

Answer 3

https://github.com/ghiden/angucomplete-alt

我认为你可以使用这个插件。以下是如何使用它。

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

然后在您的控制器中添加此项。这会将您的json文件加载到cities数组中，该数组由指令用于自动编译目的

$scope.cities = [];

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

如何将.json文件绑定到MVC AngularJS中的自动完成下拉列表

3 个答案: