Question

我正在使用ui-router

<div class="panel"ng-controller="DashboardPartnerCtrl as vm">
    <div class="panel-body">


            <li ui-sref="app.partners.detail({id:partner._id})" ng-repeat="partner in vm.partners">
                <span class="partnerHead">{{partner.name}}</span>

            </li>


         <div ui-view></div>

    </div>
</div>

我想在网址更改为li时隐藏app/partners/123，在这种情况下如何使用ng-hide？

Answer 1

首先，在DashboardPartnerCtrl控制器中，注入$location服务并放置一个布尔标志：

angular.module('amodule').controller('DashboardPartnerCtrl', ['$location', '$scope', 
    function($location, $scope){
        $scope.hideLiElement = ($location.path() === 'app/partners/123');
}]);

然后，在HTML部分中：

<li ng-hide="hideLiElement" ui-sref="app.partners.detail({id:partner._id})" ng-repeat="partner in vm.partners">
    <span class="partnerHead">{{partner.name}}</span>

</li>

Answer 2

我假设您要隐藏在您所在州选择的合作伙伴的李。

在这种情况下，隐藏li的简单方法是使用ui-sref-active docs。您可以像ng-class一样使用它。它会将您提供的类应用于ui-sref与当前状态匹配的元素。只需定义一个将显示设置为无的类，即可完成。

否则，您必须向控制器注入$ location并将其分配给变量才能在模板中使用它。您可以使用输入id的函数，它返回一个布尔值，您可以将其插入到ng-hide中。

Answer 3

当ui-sref-active为li时，您可以使用active指令来应用课程，但在此您需要完全相反的条件。所以只需在指令中提供hidden类。

<li ng-repeat="partner in vm.partners" ui-sref-active="hidden">
  <a ui-sref="app.partners.detail({id:partner._id})"> 
    <span class="partnerHead">{{partner.name}}</span>
  </a>
</li>

通过检查视角angularjs

3 个答案: