Question

使用angularjs，如何根据URL参数显示额外的标签。示例：如果用户输入网址http://myURL.com，则应显示tab1，tab2，当用户输入网址http://myURL.com/showAll时，它会显示tab1，tab2，tab3。

演示：http://plnkr.co/edit/z4h5sfcaZLDXZ8xI7KDU?p=preview

我尝试使用如下的条件检查：

<div ng-show="showAll">
<div..>

//tab content
</div></div>

以上ng-show仅基于条件检查隐藏了选项卡内的内容，但我想在用户提供网址http://myURL.com而不是http://myURL.com/showAll时隐藏tab3显示。< / p>

任何输入都会有所帮助。

PS：取自show or hide the element based on the user input，但正如我所说，它并没有隐藏UI上的标签显示，只是根据URL输入隐藏了标签内的内容。

---被编辑的部分--- app.js代码：

myApp.config(function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'index.html',
        controller: 'mainController'
    }).when('/home', {
        templateUrl: 'index.html',
        controller: 'mainControler'
    }).when('/showAll', {
        templateUrl: 'index.html',
        controller: 'showAllController'
    })});

    myApp.controller('showAllController', function ($rootScope) {
    $rootScope.status = true;
});

我添加了$ rootScope.status = true;在用户输入URL http://myURL.com/showURL时调用的控制器中。但仍然隐藏了标签。

Answer 1

您的要求的简短解决方案您可以将条件也放在选项卡列表

中

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

控制器内部：

$scope.tabs=[{"tabName":"Tab1","tabValue":"tab1Value","status":true},{"tabName":"Tab2","tabValue":"tab2Value","status":true},{"tabName":"Tab3","tabValue":"tab3Value",,"status":false}];

根据网址

更改标签状态

检查工作Code

基于输入的条件检查

1 个答案: