Angular JS: ng-hide и ng-show API

У меня есть HTML-страница, содержащая несколько контейнеров <div>. Мне нужно показать эти контейнеры <div> на основе идентификатора пользователя. Например: у меня есть 4 <div> контейнера, созданных на странице: div1, div2, div3 и div4. И у меня есть два пользователя: user1 и user2.

Я хотел бы показать div1 и div3 при доступе пользователя 1 к странице. и показать div2 и div4, когда пользователь2 получит доступ к нему. Я хотел бы использовать директивы ng-hide и ng-show для AngularJS. Как я могу достичь этого?

Ответы

Ответ 1

Я бы установил свойства в области $в объекте доступа пользователей какого-либо типа, чтобы переключать их при загрузке пользователя.

Предполагая, что пользователь загружается, когда контроллер это может быть примерно так:

app.controller('SecuredForm', function($scope) {
     //get your user from where ever.
     var user = getSomeUser(); 

     // set your user permissions
     // here some contrived example.
     $scope.permissions = {
         showAdmin: user.isRegistered && user.isAdmin,
         showBasic: user.isRegistered,
         showHelp: !user.isBanned
     }
});

В вашем html вы будете использовать эти элементы области, чтобы показывать или скрывать свои области:

<div ng-show="permissions.showAdmin">
  <h3>Admin Area</h3>
  <!-- admin stuff here -->
</div>
<div ng-show="permissions.showBasic">
  <h3>Basic Info</h3>
  <!-- admin stuff here -->
</div>
<div ng-show="permissions.showHelp">
  <h3>Help</h3>
  <!-- help stuff here -->
</div>

Следует отметить, что ng-show и ng-hide просто не отображают HTML... html все еще находится на клиенте. Поэтому будьте уверены, что когда вы делаете обратные вызовы на сервер, для которых требуются разрешения для изменения того, что вы проверяете на сервере. Вы не можете предположить, что у пользователя есть разрешение сделать что-то только потому, что форма была видна. (Вы, наверное, уже знаете это, я просто хочу быть основательным).

Ответ 2

Почему бы не дать этому jsfiddle a go. Измените переменную $scope.userId, и вы увидите обновленные изменения, когда вы нажмете "запустить" в jsFiddle. Код:

HTML:

<div ng-app>
    <div ng-controller="DivGroup">
        <div ng-show="getUserId() == 1">Div 1</div>
        <div ng-show="getUserId() == 2">Div 2</div>
        <div ng-show="getUserId() == 1">Div 3</div>
        <div ng-show="getUserId() == 2">Div 4</div>       
    </div>
</div>

JavaScript:

function DivGroup($scope) {

    $scope.userId = 2;

    $scope.getUserId = function() {
        console.log('test');
        return $scope.userId;             
    }
}

Когда userId равно 1, оно отображает содержимое одного и трех, когда оно 2 отображает содержимое двух и четырех.