如何在Angular过滤器中使用变量

时间:2014-09-02 21:51:02

标签: javascript angularjs

我在尝试使用Angular时非常忙碌。我从控制器获取一些数据,并希望在其上放置一个过滤器。这是因为我传递的是字符串。但如果我想使用变量,它不起作用。变量显示我是否直接在html中调用它。我会在这里粘贴html和js。我确信我在做一些“小”的错误,但我看不出来。

的index.html

<body ng-controller="GuestController as GuestCtrl">
          <h1 class="text-center">Guests</h1>
          <div class="btn btn-default" ng-controller="FamController as famCtrl" ng-repeat="guest in GuestCtrl.guests | filter:{name:famCtrl.fam}">
            <h3>
                {{famCtrl.fam}}  <!-- returns the right value, thats the az you see before the names -->
                {{guest.name}}
            </h3>

              <ul class="clearfix" ng-controller="FamController as famCtrl">
                <li class="small-image pull-left thumbnail" ng-repeat="famMember in guest.famMembers"> 
                    {{famMember}} 
                </li>
              </ul>
          </div>
      </body>

app.js

var app = angular.module("wedding", []);

  app.controller('GuestController', function(){
    this.guests = guests;
  });

  app.controller('FamController', function(){
    this.fam = 'az';
  });



    var guests = [
      {
        name: 'Willem & Hanneke',
        famMembers: [
          "Willem",
          "Hanneke"
        ]
      },{
        name: 'Azouz & Ria',
        famMembers: [
          "Azouz",
          "Ria",
          "Ghalil"
        ]
    }]

任何帮助将不胜感激。可能有更好的方法来实现我喜欢的东西,但我喜欢分步进行。我现在的目标是让这个工作。下一个目标是仅显示我点击的“名称”的fammember。

1 个答案:

答案 0 :(得分:1)

在ng-repeat指令

之外提取FamController

工作示例http://codepen.io/anon/pen/rbEoc?editors=101

<body ng-controller="GuestController as GuestCtrl">
    <div ng-controller="FamController as famCtrl">
        ...
    </div>
</body>