Question

我通过$http调用以JSON格式收集了一系列数据。它是这样的：

{
"projects": [
        { "url": "http://project-1-url.com", "src": "images/projects/1.png", "title": "Project 1", "tags": ["AngularJS","Web Design","Self Project"]},
        { "src": "images/projects/2.png", "title": "Project 2","tags": ["HTML","Plugin","Self Project"]}
    ]
}

正如您可能已经注意到的那样，JSON中的少数对象没有URL参数。我正在使用ngRepeat来显示类似这样的数据：

<ul>
<li ng-repeat="project in projects">{{ project.title }}</li>
</ul>

其中，项目来自控制器：

app.controller('MyCtrl', function ( $scope, $http) {
   $scope.projects = null;
   $http.get("http://api-endpoint-here").then(function (response) {
            $scope.projects = response.data;
   });
});

我希望有一些逻辑，使得具有URL属性的JSON对象应该显示为链接，而没有URL属性的JSON对象应该只输出title。很像：

<!-- If JSON has URL -->
<li ng-repeat="project in projects"><a href="project.url">{{ project.title }}</a></li>
<!-- If JSON DO NOT have URL -->
<li ng-repeat="project in projects">{{ project.title }}</li>

我应该在控制器中准备一些逻辑吗？或者是否可以在视图中使用一些ngShow逻辑？

Answer 1

不是最漂亮，但有效......

<li ng-repeat="project in projects">
    <span ng-if="project.url"><a href="project.url">{{ project.title }}</a></span>
    <span ng-if="!project.url">{{ project.title }}</span>
</li>

Answer 2

还可以像下面这样检查hasOwnProperty

{{project.hasOwnProperty("url") ? project.url:""}}

如果密钥存在，AngularJS将显示数据

2 个答案: