Angular JS: API ng-hide y ng-show

Question

Tengo una página HTML que contiene varios contenedores <div>. Necesito mostrar estos contenedores <div> basados ​​en la identificación del usuario. Por ejemplo: tengo 4 contenedores <div> creados en una página que dicen div1, div2, div3 y div4. Y tengo dos usuarios: usuario1 y usuario2.

Me gustaría mostrar div1 y div3 cuando el usuario 1 accede a la página. y muestra div2 y div4 cuando el usuario2 accede a él. Me gustaría utilizar las directivas ng-hide y ng-show de AngularJS. ¿Cómo puedo conseguir esto?

Answer 1

¿Por qué no le das esto a jsfiddle? Cambie la variable $scope.userId y verá los cambios actualizados cuando presione "ejecutar" en jsFiddle. El código:

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

Cuando el userId es 1, se muestra el contenido de uno y tres, cuando es 2 se muestra el contenido de dos y las cuatro.

Answer 2

Me gustaría establecer las propiedades del alcance $ en un objeto de acceso de usuario de algún tipo para alternar ellas cada vez que coloque el usuario.

Suponiendo que el usuario se carga cuando el controlador es que podría ser algo así:

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

en el código HTML que tendría que utilizar esos elementos para establecer el alcance mostrar u ocultar sus áreas:

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

Una cosa a tener en cuenta es que ng-show y ng-hide simplemente no muestran el HTML ... el html todavía está en el cliente. Por lo tanto, cuando realice llamadas al servidor que requieren permisos para modificar algo, debe verificarlos en el servidor. No puede suponer que el usuario tiene permiso para hacer algo simplemente porque el formulario estaba visible. (Probablemente ya sepas esto, solo quiero ser exhaustivo).

Answer 3

this true: false, show: la lógica de ocultación funcionó muy bien para mí, pero es más útil como un alternar. http://geniuscarrier.com/ng-toggle-in-angularjs/