Question

在角度js中开发应用程序并使用ui.router。我想根据给定的状态隐藏某些按钮。

我已经实现了导航到所选状态的点击事件，我希望点击一个按钮并激活隐藏状态并在状态不活动时重新出现

我试过了

HTML FOR THE BUTTONS
<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success">
        <i class="glyphicon glyphicon-plus">
        </i> New calls
    </button>
    <button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success">
        <i class="glyphicon glyphicon-plus">
        </i> Assigned calls
    </button>

在控制器上

    $scope.viewAssigned = function () {

    $state.go("dash.call.assigned");
   }

$scope.viewNew = function () {

    $state.go("dash.call.new");
      }

如何使用ng-show

更改我的控制器代码以隐藏和显示这些按钮

Answer 1

您需要通过$scope.state = $state.current.name之类的内容向控制器添加有关状态的信息从那里，您可以在ng-show或ng-if中使用它。

Answer 2

你可以这样做，

<button type="checkbox" ng-click="viewAssigned()" ng-hide="$state.includes('dash.call.assigned')" class="btn btn-sm btn-success">
    <i class="glyphicon glyphicon-plus"></i> Assigned calls
</button>

你应该在$ rootScope中添加$ state，以便工作。注入$ state，$ rootScope并将其放在应用程序的运行块中。

$rootScope.$state = $state;

Answer 3

您可以使用$ scope变量来跟踪状态更改。请查看以下代码

    $scope.viewAssigned = function () {
     $scope.viewnew = true;
    $state.go("dash.call.assigned");
   }

$scope.viewNew = function () {
     $scope.viewnew = false;
    $state.go("dash.call.new");
      }

您的HTML代码应该是这样的，

<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success" ng-hide="viewnew">
    <i class="glyphicon glyphicon-plus">
    </i> New calls
</button>
<button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success" ng-hide="!viewnew">
    <i class="glyphicon glyphicon-plus">
    </i> Assigned calls
</button>

Answer 4

您可以看到$state正在更改并隐藏该按钮的时间。在run()上，您可以使用与此类似的功能：

myApp.run(function ($rootScope, $state) {
    $rootScope.viewnew= false;
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        if (toState.name === 'myState') {//toState variable see the state you're going 
            $rootScope.viewnew = false;
        } else {
            $rootScope.viewnew = true;
        }
    });
});

然后将其添加到按钮：

<button type="button" ng-click="viewNew()" ng-hide="viewnew" class="btn btn-sm btn-success">
        <i class="glyphicon glyphicon-plus">
        </i> New calls
    </button>
    <button type="checkbox" ng-click="viewAssigned()" ng-hide="!viewnew" class="btn btn-sm btn-success">
        <i class="glyphicon glyphicon-plus">
        </i> Assigned calls
    </button>

所以，当您$state进行更改时，它会隐藏或显示它。

根据状态隐藏角度js中的按钮

4 个答案: