javascript - ng-repeat with an if-statement in Angular

Question

我有一个包含 30 篇文章的庞大列表的网站。到目前为止，这就像 300 行 HTML 代码，而使用 angularjs 现在就像 10 行。但是其中一些文章很特别，所以我需要更具体地展示什么。这是 HTML 代码:

<div id="illustratorcontent" ng-repeat="illustrator in illustrators">
        <article id="illustratorcontent{{illustrator.ID}}">
            <header>
                <h3>{{illustrator.name}}</h3>
            </header>
            <div class="illustratorcontentext">
                <p>This work is copyrighted and owned by {{illustrator.name}}...</p>
                <p>Details of the copyright holder: </p>
                <ul class="listplacing">
                    <li>Name: {{illustrator.name}}</li>
                    <li>Website: <a href="{{illustrator.website}}">{{illustrator.name}}'s website</a></li>
                    <li>Website: <a href="{{illustrator.website2url}}">{{illustrator.name}}'s {{illustrator.website2text}}</a></li>
                </ul>
            </div>
        </article>
</div>

IllustratorController 是:

function Illustrator ($scope){
$scope.illustrators = [
    {
        "ID" : "Ilus1",
        "name" : "Ilus1",
        "website" : "http://Ilus1page.com/"
    },{
        "ID" : "Ilus2",
        "name" : "Ilus2",
        "website" : "http://Ilus2page.com/"
    }, ...
    {
        "ID" : "IlusX",
        "name" : "IlusX",
        "website" : "http://IlusXpage.com/"
        "website2text" : "Twitter IlusX",
        "website2url" : "http://twitterilusx.com/"
    }
]
}

所以我的问题是如何显示现有信息并在没有提供信息的地方留下 li。

所以在这一行:

<li>Website: <a href="{{illustrator.website2url}}">{{illustrator.name}}'s {{illustrator.website2text}}</a></li>

我怎么能说这行只是在给定对象参数或不为空时显示。我已经寻找了一些方法。有一个叫做 ng-if 和 ng-ui 的东西，但对我来说没有用。还有一种方法可以通过类和隐藏 div 来实现它。但实际上我宁愿不生成它们。而website2url/website2text只是一个例子，还有更多的值。

类似的问题，但我认为我的问题比较特殊:

• > angular ng-repeat with condition
• > https://stackoverflow.com/questions/28334600/paginating-angular-ng-repeat-with-nested-filtering

Answer 1

你好创建过滤器以显示不喜欢的链接

<li ng-if="showSecondWebLink(illustrator)">....</li>

在你的 Controller 中创建函数

$scope.showSecondWebLink = function(illustrator){
    if(illustrator.website2url && illustrator.website2text ){
       return true;
    }
    return false;
}