Question

我正在使用ajax（通过AngularJS）获取Google日历供稿并在我的主页上列出最新活动。这很有用，但是，Google似乎会在日期结束时将字符串“事件状态：已确认”附加到事件列表中。这就是它的样子：

我似乎无法隐藏Feed中的“事件状态：已确认”。有没有办法可以使用AngularJS过滤器从我的JSON Feed中删除该字符串？

“事件状态：已确认”文本来自JSON Feed中的event.summary.$t属性。这就是实际属性值的样子：

"$t": "When: Sun Nov 15, 2015<br />\n\n\n<br />Event Status: confirmed""

这是我的HTML与AngularJS ng-repeat指令循环通过饲料：

<section id="calendarListing" class="col-lg-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Upcoming Events</h3>
                    </div>
                        <div class="panel-body" ng-controller="CalCtrl">
                        <ul class="list-unstyled" ng-repeat="event in events.feed.entry | reverse | limitTo: 3 ">
                    <li><h4 ng-bind-html="event.title.$t"></h4>
                        <span ng-bind-html="event.summary.$t"></span>
                    </li>    
                </ul>
                        </div>
                        <div class="panel-footer"><a href="calendar.php"><i class="fa fa-arrow-circle-right"></i> View full calendar</a></div>
                </div>
</section><!--/events-->

这是我的剧本：

var calApp = angular.module("calApp", ['ngSanitize']);
var feedUrl = 'https://www.google.com/calendar/feeds/ogmda.com_89pas0l9jbhpf053atd83hdj30%40group.calendar.google.com/public/basic?alt=json';

calApp.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

calApp.controller('CalCtrl', function($http, $scope) {
    $http.get(feedUrl).success(function(data) {
        $scope.events = data;
        console.log(data);
        });
});

angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById("calendarListing"),['calApp']);
});

Answer 1

我可能只是选择CSS解决方案。试图解析文本似乎更容易。像

这样的东西

<span class="eventSummary" ng-bind-html="event.summary.$t"></span>

和CSS

.eventSummary {
    display: block; /* or inline-block */
    white-space: nowrap;
    overflow: hidden;
    height: 1.3em; /* or whatever your line-height is */
}

如果您仍然热衷于删除文本，我会使用自定义过滤器

.filter('singleLine', function() {
    return function(html) {
        var br = html.indexOf('<br');
        return br === -1 ? html : html.substring(0, br);
    };
})

并在您的模板中

<span ng-bind-html="event.summary.$t | singleLine"></span>

AngularJS：如何从JSON提要中删除文本？

1 个答案: