Errol Green
Errol Green

Reputation: 1387

Ng-repeat filter not working

What am I doing wrong here? I'm following the exact format as stated on AngularJS

   <div ng-repeat="country in (config.countries | filter:'Canada')">
    {{country.name}}
</div>

I've also tried

   <div ng-repeat="country in (config.countries| filter:{name:'Canada'})">
    {{country.name}}
</div>

Neither of these actually filter my results.

Thanks for the help

UPDATE

json structure

"countries":{
      "Azerbaijan":{"name": "Azerbaijan", "code": "AZ","currency" :"AZN"},
      "Bahamas":{"name": "Bahamas", "code": "BS","currency" :"BSD"},
      "Bahrain":{"name": "Bahrain", "code": "BH","currency" :"BHD"},
      "Bangladesh":{"name": "Bangladesh", "code": "BD","currency" :"BDT"},

Upvotes: 1

Views: 265

Answers (2)

Hadi
Hadi

Reputation: 17299

your filter must be similar this.

function Main($scope) {
    $scope.countries = {
     "Azerbaijan":{"name": "Azerbaijan", "code": "AZ","currency" :"AZN"},
      "Bahamas":{"name": "Bahamas", "code": "BS","currency" :"BSD"},
      "Bahrain":{"name": "Bahrain", "code": "BH","currency" :"BHD"},
      "Bangladesh":{"name": "Bangladesh", "code": "BD","currency" :"BDT"}
};
  
$scope.myFilter = function(countries,filter) {
  var result = {};
    angular.forEach(countries, function(value,key) {
      if (value.name == filter) {
        result[key] = value;
      }
    });
    return result;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="Main">
    <ul>
      <li ng-repeat="(key,value) in myFilter(countries,'Azerbaijan')">
        {{value.name}}
      </li>
    </ul>
   </div>
</div>

Upvotes: 1

Chris Satchell
Chris Satchell

Reputation: 749

Could you please show us the structure/data of config.countries? I tried your second snippet with $scope.config = {}; $scope.config.countries = [{"name": "Canada"}, {"name": "England"}]; and it´s working fine.

Upvotes: 0

Related Questions