2016-06-22 13 views
0

안녕하세요, 저는 각도 j에 새로운입니다. 사용자가 모든 키 입력을 시작할 때 내 요청이 json으로 이동하고 검색 상자의 값과 일치하는 결과를 가져 오는 검색 상자를 만들고 싶습니다. 나는 어떤 일을 시도했지만이 일을 끝내는 법을 모른다. 아래 코드를 확인하십시오json 파일의 키 업에 데이터를 가져오고 각도를 사용하여 div에 추가하십시오.

다음 코드에서 일치하는 배열을 $scope.keyword에 푸시했습니다. 이 작업을 완료하면 $scope.keywordng-repeat을 사용하여 내 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); 
    }) 

    } 

}]) 

답변

0

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

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