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
-
what is the problem?Gaurav Srivastava– Gaurav Srivastava2017年08月25日 09:04:25 +00:00Commented Aug 25, 2017 at 9:04
-
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 Singh2017年08月25日 09:09:29 +00:00Commented Aug 25, 2017 at 9:09
-
can you provide a plunkarGaurav Srivastava– Gaurav Srivastava2017年08月25日 09:12:26 +00:00Commented Aug 25, 2017 at 9:12
-
Here is a Plunkar: plnkr.co/edit/HNEyDcbfCjIVo5CkqAa9 It should only show items that match 'ChampionsLeague'Neil Singh– Neil Singh2017年08月25日 09:51:00 +00:00Commented Aug 25, 2017 at 9:51
-
I basically want to have check boxes that will filter out items in the ng-repeatNeil Singh– Neil Singh2017年08月25日 09:58:05 +00:00Commented Aug 25, 2017 at 9:58
1 Answer 1
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,2223 gold badges20 silver badges37 bronze badges
Sign up to request clarification or add additional context in comments.
2 Comments
Neil Singh
Fantastic! Thanks.
Gaurav Srivastava
@NeilSingh glad to help :-)
Explore related questions
See similar questions with these tags.
lang-js