Question

嗨朋友我是角度js的新手。我想创建一个搜索框，当用户开始在每个keyup上键入时，我的请求将转到json并获取与搜索框上的值匹配的结果。我尝试了一些但不知道如何完成这项工作。请检查下面的代码

在下面的代码中，我尝试在$scope.keyword中推送匹配的数组。如果我完成此操作，我会在ng-repeat上使用$scope.keyword在我的div中显示匹配的结果。

请帮帮我朋友

控制器js

var appProduct = angular.module('assignment', []);

appProduct.service('dataCollection', function($http) {
    return { getData : function() {
        return $http.get('js/data.json').then(function(res){
          return res.data;
        })
    }}
})

appProduct.controller('searchBar', ['$scope', '$http', 'dataCollection', function($scope, $http, dataCollection){

   $scope.items = [];
   $scope.keyword = [];

  dataCollection.getData().then(function(data){
    $scope.items = data;
  }, function(data){
    console.log(data);
  })

  $scope.keyword = function(key){
    console.log(key);
    console.log($scope.items)

    dataCollection.getData().then(function(data){
    //$scope.items = data;

      angular.forEach(data, function(value, key){

      if (value.brandname == key) {
        $scope.keyword.push(value)
      }

    });


  }, function(data){
    console.log(data);
  })

  }

}])

Answer 1

<强>的index.html

<body ng-app>
    <div ng-controller="Controller">
        City: <input type="text" ng-model="name"><br>
        Order by:
        <a href="" ng-click="predicate = 'name'">name</a>
        <a href="" ng-click="predicate = 'polulation'">population</a>
        <ul>
          <li ng-repeat="city in cities | filter: name | orderBy: predicate">
             {{ city.name }} | {{ city.population }}
          </li>
        </ul>
    </div>
</body>

<强> external.js

function Controller($scope){
    $scope.cities = [
        {name: "Shanghai", population: "16 060 307"},
        {name: "Lagos", population: "13 969 284"},
        {name: "Karachi", population: "13 907 015"},
        {name: "Istanbul", population: "12 478 447"},
        {name: "Mumbai", population: "12 111 194"},
        {name: "Moscow", population: "11 821 873"},
        {name: "São Paulo", population: "11 716 620"},
        {name: "Beijing", population: "11 070 654"},
        {name: "Guangzhou", population: "11 007 835"},
        {name: "Delhi", population: "10 520 000"},
        {name: "Lahore", population: "10 467 400"},
        {name: "Shenzhen", population: "10 442 426"},
        {name: "Seoul", population: "9 761 407"},
        {name: "Jakarta", population: "9 341 844"},
        {name: "Tianjin", population: "8 981 087"},
        {name: "Chennai", population: "8 967 665"},
        {name: "Tokyo", population: "8 922 949"},
        {name: "Cairo", population: "8 906 039"},
        {name: "Dhaka", population: "8 873 017"},
        {name: "Mexico City", population: "8 859 036"},
        {name: "Lima", population: "8 754 000"},
        {name: "Kinshasa", population: "8 425 970"},
        {name: "Bangalore", population: "8 336 697"},
        {name: "New York", population: "8 308 369"},
        {name: "London", population: "8 280 925"},
        {name: "Bangkok", population: "8 244 535"},
        {name: "Tehran", population: "8 220 237"},
        {name: "Dongguan", population: "7 776 845"},
        {name: "Bogotá", population: "7 681 700"},
        {name: "Ho Chi Minh City", population: "7 310 691"},
        {name: "Faisalabad", population: "7 108 100"},
        {name: "Hong Kong", population: "6 844 100"},
        {name: "Hanoi", population: "6 809 970"},
        {name: "Hyderabad", population: "6 434 373"},
        {name: "Wuhan", population: "6 429 923"},
        {name: "Rio de Janeiro", population: "6 151 622"},
        {name: "Foshan", population: "6 150 000"},
        {name: "Baghdad", population: "5 570 585"},
        {name: "Ahmedabad", population: "5 399 200"},
        {name: "Singapore", population: "5 391 028"},
        {name: "Shantou", population: "5 188 286"},
        {name: "Riyadh", population: "5 131 967"},
        {name: "Saint Petersburg", population: "5 112 018"}
    ];
    $scope.predicate = 'population';
}

demo click here

从json文件获取keyup上的数据，并使用angular附加到div中

1 个答案: