Angular에서는 배열의 개체를 검색해야합니다.


114

Angular에서는 많은 개체를 반환하는 개체가 범위에 있습니다. 각각 ID가 있습니다 (이것은 DB가 없으므로 플랫 파일에 저장되며 사용자가 할 수없는 것 같습니다 ng-resource)

내 컨트롤러에서 :

$scope.fish = [
    {category:'freshwater', id:'1', name: 'trout', more:'false'},
    {category:'freshwater', id:'2', name:'bass', more:'false'}
];

내보기에는 ng-showmore 로 기본적으로 숨겨진 물고기에 대한 추가 정보가 있지만 simple show more 탭을 클릭하면 함수를 호출하고 싶습니다 showdetails(fish.fish_id). 내 기능은 다음과 같습니다.

$scope.showdetails = function(fish_id) {  
    var fish = $scope.fish.get({id: fish_id});
    fish.more = true;
}

이제보기에 더 많은 세부 정보가 표시됩니다. 그러나 설명서를 검색 한 후 해당 fish배열 을 검색하는 방법을 알 수 없습니다 .

그렇다면 어레이를 어떻게 쿼리합니까? 콘솔에서 어떻게 디버거를 호출 $scope하여 재생할 개체를 갖출 수 있습니까?

답변:


95

그것이 당신에게 약간 도움이 될 수 있는지 알고 있습니다.

여기 내가 당신을 위해 시뮬레이션하려고 한 것입니다.

jsFiddle 확인;)

http://jsfiddle.net/migontech/gbW8Z/5/

'ng-repeat'에서도 사용할 수있는 필터를 만들었습니다.

app.filter('getById', function() {
  return function(input, id) {
    var i=0, len=input.length;
    for (; i<len; i++) {
      if (+input[i].id == +id) {
        return input[i];
      }
    }
    return null;
  }
});

컨트롤러에서의 사용법 :

app.controller('SomeController', ['$scope', '$filter', function($scope, $filter) {
     $scope.fish = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}]

     $scope.showdetails = function(fish_id){
         var found = $filter('getById')($scope.fish, fish_id);
         console.log(found);
         $scope.selected = JSON.stringify(found);
     }
}]);

질문이 있으면 알려주세요.


angular와 javascript를 처음 접했기 때문에 "if (+ input [i] .id == + id) {"문에서 '+'의 의미를 이해하지 못합니다. 여러분의 생각을 공유해 주시겠습니까?
Harshavardhan

완벽한 솔루션 !!
Anil Kumar Ram

1
"+ input [i] .id == + id"는 숫자를 비교하고 있는지 확인합니다. 따라서 1 또는 '1'을 $ filter에 전달할 수 있으며 똑같은 방식으로 작동합니다. 영숫자 ID를 사용하고 있으므로 "input [i] .id === id"로 변경했습니다.
Axel Zehden

211

기존 $ filter 서비스를 사용할 수 있습니다. 위의 바이올린을 업데이트했습니다 http://jsfiddle.net/gbW8Z/12/

 $scope.showdetails = function(fish_id) {
     var found = $filter('filter')($scope.fish, {id: fish_id}, true);
     if (found.length) {
         $scope.selected = JSON.stringify(found[0]);
     } else {
         $scope.selected = 'Not found';
     }
 }

Angular 문서는 http://docs.angularjs.org/api/ng.filter:filter에 있습니다.


2
매우 도움이되었습니다-각도를 배우면서 저는 jQuery 함수를 먼저 생각하는 것을 멈출 필요가 있다는 것을 깨달았습니다 ($ .grep을 얻으려고 시도했습니다). 오히려이 $ filter 서비스를 사용하는 것이 제가 필요한 것입니다!
Bobby

2
자신의 필터를 작성하지 않기 때문에 더 나은 답변을 제공합니다.
stevenw00 2015 년

무엇이 $scope.selected/ 포함 된 세부 사항을 추가 할 수 있습니까 ? 선택한 항목에서 빠른 검색 수행 중 ng-selected/ ngSelected : If the expression is truthy, then special attribute "selected" will be set on the element . 같은가요? 귀하의 예에서 그것은 무엇을합니까? 감사합니다
surfmuggle 2015-07-14

1
대박 !. 간단하게 만듭니다. 감사합니다
Bharath

2
컨트롤러에 $ filter 서비스를 추가하는 것을 잊지 마십시오. ie : app.controller ( 'mainController', [ '$ filter', function ($ filter) {// 이제 $ filter를 사용할 수 있습니다.}]);
Lucas Reppe Welander 2016

22

@migontech의 답변에 추가하고 "아마도 좀 더 일반적으로 만들 수있다"는 그의 의견에 대해 설명하려면 여기에 방법이 있습니다. 아래에서 모든 속성으로 검색 할 수 있습니다.

.filter('getByProperty', function() {
    return function(propertyName, propertyValue, collection) {
        var i=0, len=collection.length;
        for (; i<len; i++) {
            if (collection[i][propertyName] == +propertyValue) {
                return collection[i];
            }
        }
        return null;
    }
});

필터링 호출은 다음과 같습니다.

var found = $filter('getByProperty')('id', fish_id, $scope.fish);

문자열 기반 일치를 허용하기 위해 단항 (+) 연산자를 제거했습니다.


이것이 ng-init의 유일한 사용 사례라고 문서에 나와있는 것을 고려하면 이것이 확실히 Angular 방식이라고 말할 수 있습니다.
bluehallu 2014

예를 매우 도움이 이해하기 매우 쉬운
rainabba

13

더럽고 쉬운 해결책은 다음과 같습니다.

$scope.showdetails = function(fish_id) {
    angular.forEach($scope.fish, function(fish, key) {
        fish.more = fish.id == fish_id;
    });
};

5
왜 이것이 더러운 솔루션입니까?
Trialcoder

5
같은,있을 수 있기 때문에 내 생각 엔, 억 물고기 기록 될 것이며, 우리는 단지 하나 하나 그들을 통해 반복하고
RedactedProfile

6
다른 언어로 더 많은 기록이있을 것입니다. 내 말은, C ++에는 많은 물고기가 있습니다. (아, 내가 가서 자신을 아래로 투표 할 수 있습니다 .. 닥쳐 .. !!)
마이크 Gledhill에게


7

귀하의 솔루션은 정확하지만 불필요하게 복잡합니다. 순수한 자바 스크립트 필터 기능을 사용할 수 있습니다 . 이것이 당신의 모델입니다.

     $scope.fishes = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}];

그리고 이것이 당신의 기능입니다.

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter({id : fish_id});
         return found;
     };

표현식을 사용할 수도 있습니다.

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter(function(fish){ return fish.id === fish_id });
         return found;
     };

이 기능에 대한 추가 정보 : LINK


4

이 스레드를 보았지만 내 검색과 일치하지 않는 ID를 검색하고 싶었습니다. 이를 수행하는 코드 :

found = $filter('filter')($scope.fish, {id: '!fish_id'}, false);

이것은 나를 위해 일했습니다. 간단하고 매끄럽고 테스트하기 쉽습니다. 감사!
Kalpesh Panchal 2017
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.