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

Question

我正在使用 ajax（通过 AngularJS）获取 Google 日历提要并在我的主页上列出最新事件。这很好用，但是，Google 似乎将字符串 "Event Status: confirmed" 附加到日期末尾的事件列表中。这是它的样子：

我似乎无法从提要中隐藏 "Event Status: confirmed"。有没有一种方法可以使用 AngularJS 过滤器从我的 JSON 提要中删除该字符串？

"Event Status: confirmed" 文本来自 JSON 提要中的 event.summary.$t属性。这是实际属性值的样子：

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

Here's my HTML with AngularJS ng-repeat directive looping through the feed:

<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-->

Here is my script:

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 提要中删除文本？

AngularJS : How to remove text from a JSON feed?

json

google-calendar-api

angularjs