基于范围值的ng-hide

时间:2016-05-02 10:18:08

标签: javascript jquery angularjs html5

我想根据登录信息隐藏列表值。当 Superadmin 登录时显示城市列表。但用户登录隐藏< strong>城市列表。

这是 controller.js

  myAppControllers.controller('LoginController',['$scope', '$location', '$http', 
function($scope, $location, $http) {

    $scope.log_userx = {};

    $scope.login_user = function(login) {
    $scope.log_user = angular.copy(login);    
    $scope.login = {};                                  
    $http({
        url: "/login",
        method: "POST",
        headers: { 'Content-Type': 'application/json' },
        data:$scope.log_user
    }).success(function (data) {
        var resp = data['user']
        $scope.user_admin = data.user.roles;
        $location.path("/index");
    }).error(function (data,status) {
        $location.path("/login");
    });
    $scope.finduser=function(){
    $scope.user_admin1=$scope.user_admin;
    alert(angular.toJson("admin1 "+$scope.user_admin1));
     $scope.visible = false;
     if($scope.user_admin1!=="superadmin")
     {
     alert("Not Superadmin");
     $scope.visible =true;
     return $scope.visible;
     }
    return true;
    };
};}]);

在Html文件中        

        <ul class="breadcrumb" style="background-color:#EEEEEE" ng-init="finduser()">
            <li><button type="submit" id="datadash" class="btn btn-default">home</button></li>
            <li ng-if="visible==true"><a href="/#/city" class="button special">city</a></li>            

</div>

3 个答案:

答案 0 :(得分:0)

尝试通过更改查看城市列表的条件来使用此html。

<ul class="breadcrumb" style="background-color:#EEEEEE" ng-init="finduser()">
        <li><button type="submit" id="datadash" class="btn btn-default">home</button></li>
        <li ng-if="!visible"><a href="/#/city" class="button special">city</a></li>
</ul>

答案 1 :(得分:0)

你应该使用ng-show。

<li ng-show="visible==true"><a href="/#/city" class="button special">city</a></li>

只有这个“城市”链接才会出现在你的超级拉丁语中。

显示此superadmin链接是基于controller.js级别的$ scope值的动画的一部分,而ng-if使用$ animate服务,当html上的动画输入html输入exclusing controller.js时。以下是来自angular docs的ng-ifng-show的示例

答案 2 :(得分:0)

使用if和else条件更新范围。

if($scope.user_admin1!=="superadmin")
 {
 alert("Not Superadmin");
 $scope.visible =true;
// return $scope.visible;
 }else{
$scope.visible =false;
}

并更改HTML,如下所示。

<li ng-if="visible"><a href="/#/city" class="button special">city</a></li>