Question

我只有AngularJS的基本经验。

这是一个AngularJS脚本，它从给定的国家/地区列表中自动填充文本框。但我需要它从本地Json文件中读取数据。

完全感到困惑，因为我的Json文件包含嵌套的Json对象。当我搜索AAL或Aalb＆＃39;在文本框中，我需要将AAL-AALBORG视为列出的。

请有人请你解释一下如何做到这一点？

<script>
    var app = angular.module("myapp", []);
    app.controller("usercontroller", function ($scope) {
        $scope.countryList = ["USA", "UK", "INDIA","KOREA"];
        $scope.complete = function (string) {
            var output = [];
            angular.forEach($scope.countryList, function (country) {
                if (country.toLowerCase().indexOf(string.toLowerCase()) >= 0)
                {
                    output.push(country);
                }
            });
            $scope.filterCountry = output;
        }
            $scope.fillTextbox = function (string) {
            $scope.country = string;
            $scope.hidethis = true;
        }
    });
</script>

HTML是，

<div ng-app="myapp" ng-controller="usercontroller">
            <label>Enter a country</label>
            <input type="text" name="country" id="country" ng-model="country" ng-keyup="complete(country)" class="form-control"/>
        <ul class="list-group" ng-model="hidethis" ng-hide="hidethis">
            <li class="list-group-item" ng-repeat="countrydata in filterCountry" ng-click="fillTextbox(countrydata)" >{{countrydata}}</li>
        </ul>
        </div>

嵌套的Json格式为：

{"AAL":{"id":"32313","airport_name":"Aalborg","latitude":"57.1","longitude":"9.85","timezone":"2","dst_indicator":"E","city":"Aalborg","country":"Denmark","country_code":"DK","region":"TC1","listing_display":"true","pseudonyms":""},"AAR":{"id":"32314","airport_name":"Tirstrup","latitude":"56.15","longitude":"10.2167","timezone":"2","dst_indicator":"E","city":"Aarhus","country":"Denmark","country_code":"DK","region":"TC1","listing_display":"true","pseudonyms":""}}

Answer 1

您可以使用$ http服务。

$http.get('path_to_your_json_file').then(

 function success(data){
    $scope.myArray = data;
}

）

Answer 2

在组件初始化时，使用此数据填充数据数组，当用户在输入中写入时，例如使用keyup获取值。如果您的autocompleteData存在＆amp;＆amp;你的长度＆gt; 0然后您可以在输入下显示一个表格。

要过滤，我会使用类似的东西：

filter(company: Airline){ 
    this.companyTable.filter((company) => {
      return company.name.toLowerCase().indexOf(valueFilter.toLowerCase()) >= 0 
});

公司是来自yourTable的公司，而valueFilter是输入中的单词（可以使用DOM / ElementRef访问，请参阅doc）

Answer 3

假设：

$scope.countryList = {"AAL":{"id":"32313","airport_name":"Aalborg","latitude":"57.1","longitude":"9.85","timezone":"2","dst_indicator":"E","city":"Aalborg","country":"Denmark","country_code":"DK","region":"TC1","listing_display":"true","pseudonyms":""},"AAR":{"id":"32314","airport_name":"Tirstrup","latitude":"56.15","longitude":"10.2167","timezone":"2","dst_indicator":"E","city":"Aarhus","country":"Denmark","country_code":"DK","region":"TC1","listing_display":"true","pseudonyms":""}};

试试这个：

angular.forEach($scope.countryList, function (country, code) {
            if ((code.toLowerCase().indexOf(string.toLowerCase()) >= 0) | (country.city.toLowerCase().indexOf(string.toLowerCase()) >= 0))
            {
                output.push(code +"-" +country.city);
            }
        });

Answer 4

Final Script as per suggestions, Thanks all :



    var app = angular.module("myapp", []);
    app.controller("usercontroller", function ($scope,$http) {
        $http.get('js/airport.json').then(
            function (response) {
                $scope.countryList = response.data;
            })
        $scope.complete = function (string) {
            var output = [];
            angular.forEach($scope.countryList, function (country, code) {
                if ((code.toLowerCase().indexOf(string.toLowerCase()) >= 0) | (country.city.toLowerCase().indexOf(string.toLowerCase()) >= 0)) {
                    output.push(code + "-" + country.city);
                }
            });
            $scope.filterCountry = output;
        }
            $scope.fillTextbox = function (string) {
            $scope.country = string;
            $scope.hidethis = true;
        }
    });

从AngularJS中的json自动完成文本框

4 个答案: