Angularjs - How to push items into array based on bool values

Question

I have a simple ng-repeat:

<li ng-repeat="country in getCountryGroups()">
        {{country.name}}
</li>

I am trying to only display records if a bool value is true:

My controller:

$scope.countries = [
    {name: 'France', population: 63.1, visited: true},
    {name: 'Spain', population: 23.5, visited: true},
    {name: 'Greece', population: 44.6, visited: true},
    {name: 'United Kingdom', population: 61.8, visited: false}
];


$scope.getCountryGroups = function () {
    var groupArrayNew = [];

    angular.forEach($scope.countries, function (item, idx) {
        if (groupArrayNew.indexOf(item.visited) == -1)
          groupArrayNew.push(item.visited)
    });

    return groupArrayNew.sort();
}

However nothing is displayed on the front end.

Sebastian · Accepted Answer · 2014-05-01 12:17:52Z

3

Or do it in the template:

<li ng-repeat="country in countries">
  <p ng-show="country.visited">{{country.name}}</p>
</li>

or (as suggested in the comments) use a filter:

<li ng-repeat="country in countries | filter:{visited:true}">
  {{country.name}}
</li>

edited May 1, 2014 at 12:17

answered May 1, 2014 at 12:06

Sebastian

17.6k5 gold badges51 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Poyraz Yilmaz Over a year ago

doing it in template much more cleaner and asy way to do it... but if you need that array in controller that is another thing...

Nix · Accepted Answer · 2014-05-01 12:14:20Z

1

You are pusing the item.visited versus item. You need to update your push and indexOf statements. (see the last part of my answer because filter is better in your situation)

Change:

 groupArrayNew.push(item.visited)

To

 groupArrayNew.push(item)

$scope.getCountryGroups = function () {
  var groupArrayNew = [];
  angular.forEach($scope.countries, function (item, idx) {
    if (item.Visited)
      groupArrayNew.push(item)l
  });
  return groupArrayNew.sort();
}

You could also bypass the function and use the built in filter:

<li ng-repeat="country in countries|filter:{visited:true}">{{country.name}}</li>

Sample plnkr that shows both:

edited May 1, 2014 at 12:14

answered May 1, 2014 at 12:02

Nix

58.8k31 gold badges154 silver badges206 bronze badges

Comments

Russ Cam · Accepted Answer · 2014-05-01 15:46:40Z

0

Something like

$scope.getCountryGroups = function () {
    var groupArrayNew = [];

    angular.forEach($scope.countries, function (item, idx) {
        if (item.visited)
          groupArrayNew.push(item)
    });

    return groupArrayNew;
}

Although has been pointed out in the comments, unless you need groupArrayNew for other purposes (which I don't suspect you do as it is calculated each time by the function), you can achieve what you want with a filter

<li ng-repeat="country in countries | filter:{visited:true}">
    {{country.name}}
</li>

edited May 1, 2014 at 15:46

answered May 1, 2014 at 12:03

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Collectives™ on Stack Overflow

Angularjs - How to push items into array based on bool values

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related