Question

当我从服务器接收JSON数据时，我会根据从JSON获得的数据自定义页面。问题是，如果页面高度自定义，我将需要一个if语句，用于需要在HTML中创建的每个元素。

问题是，除了检查AngularJS中的每个变量之外还有另一种方法吗？示例JSON数据：

{
    user_logged_in: 'yes', 
    user_custom_background: 'no', 
    user_likes_page: 'yes'
}

在AngularJS中，我需要一个if语句检查每个JSON变量，以决定是否应该在页面上显示某些内容，因此if的数量可以变为指数。

修改通过指数我的意思是页面有很多要创建的元素，这取决于数据库中的用户数据，检索为JSON，每个都需要自己的if语句。

Rending逻辑是伪代码：

if user_logged_in: 'yes' then show black `div`
if user_custom_background: 'yes' then change background color 
if user_likes_page: 'yes' then display message

对于复杂的网络应用，IF的数量将是巨大的。

Answer 1

鉴于您正在使用AngularJS，您应该能够将服务器中的JSON数据分配给控制器中的范围变量，如下所示：

$http({
    method: 'GET',
    url: '/server/data',
}).success(function(response) {
    $scope.serverResponse = response;
});

出于测试目的，我会跳过异步调用，只需使用问题中的对象来设置serverResponse（请注意，我按照@Doctus中的建议使用布尔值。）：

$scope.serverResponse = {
    user_logged_in: true, 
    user_custom_background: false, 
    user_likes_page: true
};

其余的将涉及HTML标记更改。根据您的伪代码，我假设需要进行以下更改：

<div id="black" ng-show="serverResponse.user_logged_in">Logged In</div>
<div id="background" ng-style="{'background-color': ( serverResponse.user_custom_background ? '#FF0000' : '#00FF00')}">&nbsp;</div>
<div id="message" ng-show="serverResponse.user_likes_page">Message</div>

这是一个JSFiddle，显示了这一点：http://jsfiddle.net/sy0q263n/

希望这有帮助！

仅在存在JSON数据时创建页面元素

1 个答案: