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>

如何在给出object参数或不为空时才显示此行。我已经找了一些方法。有一种叫做 ng-if 和 ng-ui 的东西，但这对我没用。还有一种方法可以通过类和隐藏div来实现它。但实际上我宁愿不生成它们。 website2url / website2text 就是一个例子，价值不止于此。

类似的问题，但我相信我的有点特别：

Answer 1

试试：

<li ng-if="illustrator.website2url && illustrator.website2text">...</li>

Answer 2

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

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

在控制器中创建功能

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

在Angular中使用if语句进行ng-repeat

2 个答案: