AngularJS reference variables based on another variable

Question

I want to be able to reference a variable in an Angular template that is built up on another variable with a filter.

So for example, I might have this in the controller:

$scope.EuropaLeague = true;

If I do this in the template it works as expected:

<div ng-if="EuropaLeague">

</div>

But what if I wanted to dynamically populate the ng-if with something coming from an ng-repeat e.g.

{{item.leagueName | myFilter}}

So the above would reference my scope variable $scope.EuropaLeague E.g. True or False?

Thanks

The problem is that ng-if"{{item.leagueName | myFilter}}" doesn't work. It can only outputs the string 'EuropaLeague'. I want to reference the EuropaLeague scope variable. — Neil Singh
– Neil Singh, Commented Aug 25, 2017 at 9:09
Here is a Plunkar: plnkr.co/edit/HNEyDcbfCjIVo5CkqAa9 It should only show items that match 'ChampionsLeague' — Neil Singh
– Neil Singh, Commented Aug 25, 2017 at 9:51
I basically want to have check boxes that will filter out items in the ng-repeat — Neil Singh
– Neil Singh, Commented Aug 25, 2017 at 9:58

Gaurav Srivastava · Accepted Answer · 2017-08-25 10:00:56Z

2

Here is working code:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.leagues =
  [
    {
      "id": 1,
      "name": "ChampionsLeague",
    },
    {
      "id": 2,
      "name": "EuropaLeague",
    },
    {
      "id": 3,
      "name": "FACup",
    }
  ]
  $scope.obj = {};
  $scope.obj['EuropaLeague'] = false;
  $scope.obj['FACup'] = false;
  $scope.obj['ChampionsLeague'] = true;
  
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <ul ng-repeat="item in leagues" ng-if="item.name">
      <li ng-if="obj[item.name]">{{item.name}}</li>
    </ul>
  </body>

</html>

answered Aug 25, 2017 at 10:00

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

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

2 Comments

Neil Singh Over a year ago

Fantastic! Thanks.

Gaurav Srivastava Over a year ago

@NeilSingh glad to help :-)

Collectives™ on Stack Overflow

AngularJS reference variables based on another variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related