Question

我将一个活动日历放在一起举行周末活动。我试图为每一天创建一个角度模板，因为每个都有自己的颜色（css1和css2）。我能够创建一个模板，读取所有事件并在周六和周日一起返回，如下面的第一个plunker链接所示。

但是当我试图让模板只返回星期六的事件时它不起作用，下面是plunker。很抱歉，如果在plunker中看起来代码太多，只是试图显示需要使用options标签来处理模板。不用说我是Angular的新手，所以任何帮助都会受到赞赏。

使用单个模板plunker：http://plnkr.co/edit/gaKFWTsACxwCg0i4JCiw?p=preview

周六模板的插件不起作用：http://plnkr.co/edit/A6f8ZUyXg9pdH6HzO2ET?p=preview

 <h1>Saturday</h1>
 <div class="target-stage stage-only" style="width:100%; border:none;" 
    ng-repeat="item in artists | filter: query | filter: {{day: artistDay, 
value:"Saturday"}, time: artistTime, stage: artistStage}">

      <table width="100%" cellspacing="0" border="0" cellpadding="0" 
style="border:none;">           
        <tr>
          <td class="venue-bar"><h3 style="font-size:16px;"><b>{{item.stage}}
</b></h3></td>
        </tr>
      </table>

      <table class="target-stage stage-only" border="0" cellspacing="0" 
cellpadding="0" style="border:none;" >  
      <tr>
        <td width="190" valign="top" class="ev-time">{{item.time}}</td>
        <td valign="top" class="ev-desc">
        <p class="ev-date">{{item.day}}, {{item.date}}, 2015</p>
        <strong>{{item.first_name}} {{item.last_name}},</strong> Author of 
<em>" {{item.work_title}}"</em><br />
        {{item.stage}}
        <span class="info-btn"><p class="selctor" rel={{item.rel}}><span 
class="addSchd"><a href="#"><b>+ MY SCHEDULE</b></a></span>
        <span class="premove hidd" rel="0"><a href="#">Remove</a></span></p>
</span></td>
      </tr>
    </table>
  </div>

Answer 1

ng-repeat="... value:"Saturday" ... "

HTML引号中包含双引号的双引号。这显然不是有效的HTML。使用单引号：

ng-repeat="... value:'Saturday' ... "

现在修复后，过滤器值应该是一个JavaScript对象。你得到了

{{day: artistDay, value:'Saturday'}, time: artistTime, stage: artistStage}

这不是有效的对象。这是一个有效的对象：

{day: 'Saturday', time: artistTime, stage: artistStage}

编辑：

行。这是一个傻瓜：http://plnkr.co/edit/A6f8ZUyXg9pdH6HzO2ET?p=preview

以下是要点。

您想要显示一天：在组合框中选择的那个。所以迭代这些日子并试图过滤列表只保留选定的日子是没用的。您已经拥有唯一的打印日：在组合框中选择的那一天。所以你需要的只是
```
<h1>{{ artistDay }}</h1>
```
如上所述，filter参数必须是一个对象。您希望保留day属性与artistDay中包含的值匹配的元素，因此过滤器应该只是
```
{day: artistDay, time: artistTime, stage: artistStage}
```
你有两个其他属性的语法，BTW。为什么一天会有所不同？

在Angular中使用特定过滤器

1 个答案: