2012-10-11 9 views
22

Mam stronę HTML zawierającą kilka kontenerów <div>. Wymagam wyświetlenia tych kontenerów <div> na podstawie identyfikatora użytkownika. Na przykład: Mam 4 <div> kontenery utworzone na stronie powiedzieć div1, div2, div3 i div4. Mam dwóch użytkowników: user1 i user2.Angular JS: ng-hide i ng-show API

Chciałbym pokazać div1 i div3, gdy użytkownik 1 ma dostęp do strony. i pokaż div2 i div4, gdy użytkownik2 uzyska do niego dostęp. Chciałbym użyć dyrektyw ng-hide i ng-show AngularJS. Jak mogę to osiągnąć?

+0

W jaki sposób określasz, który użytkownik uzyskuje dostęp do strony? Podałem ogólną odpowiedź i w razie potrzeby zaktualizuję ją. –

Odpowiedz

15

Dlaczego nie dać tego jsfiddle. Zmień zmienną $scope.userId, a zobaczysz zaktualizowane zmiany, gdy naciśniesz "run" na jsFiddle. Kod:

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;    
    } 
} 

Gdy userId wynosi 1, to wyświetla zawartość jednego do trzech, kiedy to 2 wyświetla zawartość dwóch i cztery.

25

chciałbym ustawić właściwości zakresu $ w obiekcie dostępu użytkownika jakiejś je przełączać włożeniu użytkownika.

Zakładając, że użytkownik jest ładowany, gdy kontroler jest to może być coś tak:

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

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

w HTML chcesz korzystać z tych przedmiotów zakresie, aby ustawić pokazać lub ukryć obszary:

<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> 

Należy zwrócić uwagę na to, że ng-show i ng-hide po prostu nie wyświetlają kodu HTML ... HTML nadal znajduje się na kliencie. Dlatego upewnij się, że podczas nawiązywania połączeń z serwerem, które wymagają uprawnień, aby zmienić coś, co sprawdzasz, na serwerze na serwerze. Nie można założyć, że użytkownik ma pozwolenie na zrobienie czegoś tylko dlatego, że formularz był widoczny. (Prawdopodobnie już to wiesz, po prostu chcę być dokładny).