AngularJS : 如何做ng-bind逻辑检查？

Question

我收到了一些推文数据，有时数据库 returns 是一个不同的 JSON 对象，具体取决于服务器（本地、生产等）。

有时推文内容在tweets[i].text，有时在tweets[i].highlights.text

我当前的标记：

<section ng-repeat="t in tweets">
    <div ng-bind-html="t.text">{{t.text}}</div>

    <!-- <div ng-bind-html="t.highlights.text">{{t.highlights.text}}</div> -->

如果 t.text 存在，是否有办法检查 ng-bind？如果不是，则将模型设置为 t.highlights.text?

ng-if:

在 div 上使用 ng-if 呈现列表中的实际推文：

<section ng-repeat="t in tweets" class="social-content">
    <a href="http://twitter.com/{{t.fields.user_name}}/status/{{t.id}}" target="_blank">
        <header>
            <em>+</em>
            <span>@{{t.fields.user_name}}</span>
        </header>
        <div class="body" ng-if="t.text != undefined" ng-bind-html="t.text">{{t.text}}</div>
        <div class="body" ng-if="t.highlights.text != undefined" ng-bind-html="t.highlights.text">{{t.highlights.text}}</div>
    </a>
    <time>{{t.fields.formatted_date_difference}} ago</time>
</section>

Answer 1

控制器：

$scope.isHighlights = false;

$scope.tweets = [];

$scope.getTweets = $http.get('url').then(function(data){
   //Get first tweet and set isHighlighted bool based on the property being defined
    $scope.isHighlighted = angular.isDefined(data[0].highlights);
    $scope.tweets = data;
});

查看：

<div data-ng-if="isHighlights">
    <section data-ng-repeat="t in tweets">{{t.highlights.text}}</section>
</div>

<div data-ng-if="!isHighlights">
    <section data-ng-repeat="t in tweets">{{t.text}}</section>
</div>

这在内存上更轻，绑定更少，并且对于检查代码的任何其他人来说更容易阅读。有一百万种方法可以给这只猫剥皮。这种方式假设它们都是一种格式或另一种格式，并且一个屏幕上可能有很多推文。

Answer 2

根据 Ben 的建议，这根本不应该在视图中，它应该在负责呈现数据模型以供视图呈现的控制器中。

$scope.tweets.forEach(function(t) {
    t._content = t.text || t.highlights.text || '';
});

然后在您的视图中呈现 t._content 而不是 t.text 等

AngularJS : 如何做ng-bind逻辑检查？

AngularJS : How to do ng-bind logic check?

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-model

ng-if: