Создание только элементов страницы Если присутствуют данные JSON

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 

Количество МСФ будет ОГРОМНЫЙ для комплексного веб-приложения.

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/

Надеются, что это помогает!