Angular.js: Условный связывание для вложенного объекта

Question

у меня угловой контроллер, как показано ниже:

var isAuth = true; 
    $scope.Dashboard = function (isAuth) { 
     $scope.DashboardActions = [{ 
      AreaName: 'Create Request', 
      Functions: [{ 
       FunctionName: 'Request Grid', 
       Actions: { 
        View: isAuth, 
        Sort: isAuth, 
        Filter: isAuth, 
        EditLink: isAuth 
       } 
      }, { 
       FunctionName: 'Create Dummy Request', 
       Actions: { 
        Enable: (isAuth) ? 'inline-block' : 'None' 
       } 
      }] 
     }]; 
    }; 

и HTML, как:

<span style="display:{{Enable | Function {'FunctionName', 'Create Dummy Request'} | DashboardActions }}" class="Action">Actions        
          <a href="#/REQUEST/0" class="btn btn-primary">Create Dummy Request Test</a> 

Я хочу, чтобы позволить отключить span с классом Action по до Enable Недвижимость. Как мне это сделать? К сожалению, только учусь Угловая эти дни ...

Fiddle

Answer 1

используется ng-class условно применить классы объектов DOM. См. docs для получения дополнительной информации.

Кроме того, вам нужно позвонить Dashboard() на init, поскольку он создает объект, который вы хотите использовать. Для этого вы можете использовать ng-init.

Просмотреть обновленный Fiddle.

Answer 2

Используйте ng-style или ng-class, чтобы применить условный стиль с переменной $ scope. Также вам нужно инициализировать функцию $scope.Dashboard(). Помните, что если вам нужно проверить множество условий, чтобы определить, какой класс активен, используйте функцию для проверки условий. Удалите условия проверки в HTML, поскольку страница HTML становится тяжелой. This jsfiddle - одно из многих возможных решений вашего вопроса.