AngularJS: Rota bir sayı aldığında menüyü gizleme

Rota bir sayı aldığında menu öğesini nasıl gizleyebilirim?AngularJS: Rota bir sayı aldığında menüyü gizleme

Örnek: İlk durum: geçerli rota http: base.com/files ise, rota http: base.com/files/1 olarak değiştiğinde gizlenmelidir (herhangi bir sayı değeri olabilir).

İkinci durum: geçerli rota http: base.com ise, yol http: base.com/diff/1/2 olarak değiştiğinde gizlenmelidir (herhangi bir sayı değeri olabilir).

Üçüncü durum (sanki benzer, yalnızca varsayılan rota farklıdır): geçerli rota http: base.com/diff ise, rota http: base.com/diff/1/ olarak değiştiğinde gizlenmelidir. 2 (herhangi bir sayı değeri olabilir).

kullanıcı sınıfı files itibaren bir onay seçtiğinde

Temel olarak, yol değişikliği (yalnızca bir numara olacaktır), yada sınıf diff iki onay kutuları seçtiğinde (iki sayılar/x/y alacak) bu yardımcı olur

JSFIDDLE

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app> 
    <a href="#" class="toggle-menu" ng-click="collapsed=!collapsed">Click to toggle menu</a> 
    <div class="menu" ng-show="collapsed"> 
    <div class="files"> 
     <input type="checkbox" /> 
     <label>first</label> 

     <input type="checkbox" /> 
     <label>second</label> 
    </div> 
    <div class="diff"> 
     <input type="checkbox" /> 
     <label>first</label> 

     <input type="checkbox" /> 
     <label>second</label> 
    </div> 
    </div> 
</div>

, ben benim controller yılında scope aşağıdadır:

scope.update_selection = function(updated_file_id){ 
    selected_count = 0; 
    if (scope.is_initial_selection){ 
     scope.is_initial_selection = false; 
     scope.file_map = {}; 
     scope.file_map[updated_file_id] = true; 
    } 

    if (scope.number_of_files == 1){ 
     path = '/files/' + updated_file_id; 
     $location.path(path); 
    } 
    else { 
     updated_file_selected = scope.file_map[updated_file_id]; 
     if (updated_file_selected) { 
      //search for the other file 
      found = false; 
      for (file_id in scope.file_map){ 
       if (file_id == updated_file_id) 
        continue; 

       found = scope.file_map[file_id]; 
       if (found == true){ 
        scope.file_1_id = file_id; 
        scope.file_2_id = updated_file_id; 
        break; 
       } 
      } 

      if (!found){ 
       scope.file_1_id = updated_file_id; 
       return; 
      } 
     } 

     path = '/diff/' + scope.file_1_id + '/' + scope.file_2_id 
     $location.path(path); 
    } 
}

kaynak

2016-04-01 Valip

kullandığınız rota lib ? Menü öğesini gizlemek için ** ng-if = "YOUR_FLAG == true" ** kullanın. Ve onay kutusunda ** ng-change ** kullanın. –

'Route lib' ile ne demek istiyorsun? Üzgünüm, angularjs ile bir şey uygulamaya başladım ve bununla ilgili deneyimim yok .. – Valip

Neyi başardığımı anlamadım. Ancak, menü öğelerini nasıl gizleyebildiğinizi kontrol edin. Gereksinimlerinize göre bunu değiştirin. –

Bu cevabı kontrol edin.

var app = angular.module('myApp', []) 
 
app.controller('DemoController', function($scope) { 
 
    $scope.collapsed = false; 
 
    $scope.selectedObject = { 
 
    'num': 0, 
 
    'item': '' 
 
    }; 
 
    $scope.checkValue = function(number, item) { 
 
    $scope.selectedObject.num = parseInt(number); 
 
    $scope.selectedObject.item = item; 
 
    } 
 
    $scope.toggleMenu = function(){ 
 
    $scope.collapsed = true; 
 
    } 
 
})

<html> 
 
    <head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 
<body> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="DemoController"> 
 
    <a href="#" class="toggle-menu" ng-if="!collapsed" ng-click="toggleMenu()">Click to toggle menu</a> 
 
    <div class="menu" ng-show="collapsed"> 
 
     <div class="files" ng-if="selectedObject.num<1"> 
 

 
     <input type="checkbox" ng-click="checkValue('files')" /> 
 
     <label>first</label> 
 

 
     <input type="checkbox" ng-click="checkValue('files')" /> 
 
     <label>second</label> 
 
     </div> 
 
     <div class="diffs" ng-if="selectedObject.num<1"> 
 
     <input type="checkbox" ng-click="checkValue('diffs')" /> 
 
     <label>first</label> 
 

 
     <input type="checkbox" ng-click="checkValue('diffs')" /> 
 
     <label>second</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

kaynak

2016-04-01 11:26:14

Bu kısmi bir çözümdür, menüyü gizlemek için iki farklı onay kutusunu seçmelisiniz ... – Valip

Bu Plunker kontrol edin https://plnkr.co/edit/v7MdL6EahRBMQGoTamy8?p=preview –

AngularJS: Rota bir sayı aldığında menüyü gizleme

cevap

İlgili konular