AngularJS 基于另一个变量的引用变量

Question

我希望能够在 Angular 模板中引用一个变量，该模板建立在另一个带有过滤器的变量上。

例如，我可能在控制器中有这个：

$scope.EuropaLeague = 真；

如果我在模板中这样做，它会按预期工作：

<div ng-if="EuropaLeague">

</div>

但是如果我想用来自 ng-repeat 的东西动态填充 ng-if 怎么办，例如

{{item.leagueName | myFilter}}

所以上面会引用我的范围变量 $scope.EuropaLeague 例如对还是错？

谢谢

Answer 1

这是工作代码：

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="angular.js@1.3.x" 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>

AngularJS 基于另一个变量的引用变量

AngularJS reference variables based on another variable

javascript

angularjs

angularjs-scope