사용자 입력을 기반으로 요소 표시 또는 숨기기

Question

URL을 기반으로 탭 (Tab3)을 표시하거나 숨기려고합니다.

데모 : http://plnkr.co/edit/z4h5sfcaZLDXZ8xI7KDU?p=preview

예) 응용 http://myURL.com로 사용자가 로그인, 처음 두 개의 탭 (TAB1, TAB2)를 도시한다과 tab3에 숨겨져되어야 할 때 사용자 유형 http://myURL.com/showAll 모든 탭 (TAB1, TAB2, Tab3)이 표시되어야합니다. 사용자가 입력 한 URL 경로를 기반으로 탭을 표시하거나 숨기는 방법에 대한 모든 입력 사항은 무엇입니까?

샘플 코드 :

<div ng-app="tabs" ng-controller="tabsctrl"> 
    <div> 
    <div class="top-tabs"> 
     <!-- Nav tabs --> 
     <ul class="nav nav-tabs" role="tablist"> 
     <li role="presentation" class="{{ tab.tabValue == activeModule? 'active':''}}" ng-repeat="tab in tabs"> 
      <a href="javascript:void(0)" ng-click="tabAction(tab.tabValue,tab.tabName)">{{tab.tabName}}</a> 
     </li> 
     </ul> 

     <div class="tab-content"> 
     <div ng-if="tabName === 'Tab1'" role="tabpanel" class="tab-pane active" id="tab1"> 
      <div class="row"> 
      Tab1 contnet 
      </div> 
      </div> 
     </div> 

     <div ng-if="tabName === 'Tab2'" role="tabpanel" class="tab-pane active" id="tab2"> 
      <div class="row"> 
      <div class="col-sm-12"> 
      Tab2 data 
       </div> 
      </div> 
      </div> 
     </div> 

      <div ng-if="tabName === 'Tab3'" role="tabpanel" class="tab-pane active" id="tab2"> 
      <div class="row"> 
      <div class="col-sm-12"> 
      This tab should be shown based on the URL path 
      </div> 
     </div> 

     </div> 
    </div> 
    </div> 
</div> 

Answer 1

당신은 자바 스크립트 https://docs.angularjs.org/api/ng/service/ $ 위치

const url = location.url();

에 location 공급자를 사용하여 HTML에 당신의 상태를 업데이트해야 ng-if="tabName === 'Tab3' || url === 'http://myURL.com/showAll'"

당신은의 두 ID가 있습니다. 당신의 HTML, 당신은 수정해야하고 당신이 당신의/ShowAll 관련이 다른 경로 것 및 다른 매개 변수를 해결하는 것입니다 있도록 UI 라우터 및 설정 경로를해야합니다 들어 TAB1

Answer 2

에 col-sm-12div 컨테이너를 누락에.

이것은 당신의 주요 통로가 될 것입니다 : http://myURL.com

이 몇 가지 매개 변수 걸릴 것 : showParameter이 ShowAll 관련되어있는 경우 확인할 수 두 번째의 결의에 다음 http://myURL.com/:showParameter

그리고 당신이 원하는대로 해결 - 즉 노출 일부 변수 표시/숨기기.

https://github.com/angular-ui/ui-router

Answer 3

당신은 RouteProvider 및 routeParams를 사용해야합니다. 이제 params의 값이

.controller('yourController', ['$scope','$routeParams', function($scope, 
    $routeParams) { 
     $scope.param1 = $routeParams.param1; // just as an example to model this in view 
     var param2 = $routeParams.param2; //change here from param1 to 
     param2 
     ... 
    }]); 

다음과 같이 컨트롤러에 injectingn $routeParams하여 URL에 주어진 얻을

$routeProvider.when('/yourView/:param1/:param2', { 
    templateUrl: 'yourViewHTMLFile.html',  
    controller: 'yourController' 
    }); 

예를

를 들어

은 간단하다. 값을 기준으로 탭을 표시하거나 숨기십시오.

<div id='tab1'>Tab1</div> 
    <div id='tab2'>Tab2</div> 
    <div id='tab3' ng-show='{{param1 =='testValue'}}'>Tab3</div>