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

【问题标题】：Creating Page Elements Only If JSON Data is Present仅在 JSON 数据存在时创建页面元素
【发布时间】：2015-01-01 22:45:27
【问题描述】：

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

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

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

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

编辑所谓指数，我的意思是页面有很多元素要创建，具体取决于数据库中的用户数据，以 JSON 形式检索，每个元素都需要自己的 if 语句。

渲染逻辑是，伪代码：

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 的数量是巨大的。

【问题讨论】：

你能告诉我们你的渲染逻辑吗？这对我来说似乎不是指数级的，只是线性的。
不是答案，但将这些值存储为布尔值（真/假）而不是字符串会更容易。然后你可以做if(user_logged_in)等等。
@Doctus 是的，我提供的只是某种伪代码。

标签： php jquery mysql json angularjs

【解决方案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/

希望这会有所帮助！

【讨论】：

感谢您的回复。虽然这确实简化了使用 ng-if，但我确信在内部运行相同数量的 if 语句来检查是否设置了变量，这是我想要避免的，使用这么多条件。我想除了检查每个变量之外没有其他方法可以做到这一点。
@user3704920 如果这些变量在逻辑上相关，您可以将它们作为输入链接到状态机，状态机将为您的元素设置属性。假设您将一个位标志与每个属性相关联并将它们全部异或，您将得到一个映射到状态的数字。 user_logged_in (1)、user_custom_background (2) 和 user_likes_page (4) 设置为 true false true 将生成 5，您的代码将其称为 show black div 和 display message。如果您不计算 jQuery 选择器内部，那么这里唯一的 if 将在您的 switch 语句中。