Köşeli JS: ng-hide ve ng-show API'si

Question

Çeşitli <div> kapsayıcıları içeren bir HTML sayfam var. Kullanıcı kimliğine göre bu <div> kapsayıcılarını göstermem gerekiyor. Örneğin: bir sayfada div1, div2, div3 ve div4 gibi 4 <div> kapsayıcı var. Ve iki kullanıcım var: user1 ve user2.

Kullanıcı 1 sayfaya eriştiğinde div1 ve div3 göstermek istiyorum. ve kullanıcı2 eriştiğinde div2 ve div4 göster. AngularJS'nin ng-hide ve ng-show direktiflerini kullanmak istiyorum. Bunu nasıl başarabilirim?

Answer 1

Neden bu jsfiddle a gitmeyin. $scope.userId değişkenini değiştirin ve jsFiddle'da "çalıştır" düğmesine bastığınızda güncellenmiş değişiklikleri göreceksiniz. 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: userId 1'dir

function DivGroup($scope) { 

    $scope.userId = 2; 

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

zaman durum 2 ikisi içeriğini görüntüler zaman, bu bir ve üç içeriğini görüntüler ve dört. Eğer kullanıcı yüklemek zaman

Answer 2

Onları geçiş yapmak için bir çeşit kullanıcı erişim nesnesi $ kapsamına özelliklerini belirleyecek.

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

html'nizin size alanlarınızı göstermek ayarlamak veya gizlemek için bu kapsam öğeleri kullanmayı tercih ediyorum:

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

kullanıcıyı varsayarsak

kontrolör o kadar gibi bir şey olabilir olduğunda yüklenir

Dikkat edilmesi gereken tek şey, ng-show ve ng-hide'in HTML'yi görüntülememesi ... html hala istemcide. Bu nedenle, sunucuya numaralı sunucuda kontrol ettiğiniz bir şeyi değiştirmeye izin veren çağrıları geri çağırdığınızdan emin olun. Kullanıcının form görünür olduğundan, bir şey yapma izninin olduğunu varsayamazsınız. (Muhtemelen bunu zaten biliyorsun, sadece titiz olmak istiyorum).

Answer 3

this true: false, show: hide mantığı benim için çok iyi çalıştı, ancak çoğunlukla bir geçiş olarak kullanışlıdır. http://geniuscarrier.com/ng-toggle-in-angularjs/