Question

角度js新手。我读了很多关于我的代码的解决方案我面临的问题是，我有两张桌子。默认情况下，一个表是hide，一个是可见的。当我点击按钮并希望隐藏第二个表格时，我想要显示隐藏的表格。当我点击按钮时，ng-show值更新但表格没有隐藏，所需的表格没有显示。在此先感谢您的帮助。

页面加载代码：controller.js

.'

HTML代码：

var refresh = function(){
            /** Driver Profile Data */
            $scope.userProfile_show  = true;
            $scope.editUserProfile_show  = false;
            $http.get('/user/profile/?user_id='+$location.search()['driverID'], {headers:{'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'}
            }).success(function (response) {
                $scope.userProfile = response.data;
            });

            });
        }

        refresh();

在页面加载时，两个表都正常工作，但是当单击“编辑用户配置文件”按钮时，ng-show的值会更新，但表格不会切换其可见性。

editUserProfile（）的控制器代码

<table class="table" id = "editUserProfile" ng-show = "{{editUserProfile_show}}">
                <thead>
                    <tr>
                        <td>Property</td>
                        <td>Value</td>
                    </tr>
                </thead>
<table>

<table class="table" id = "userProfile" ng-show= "{{userProfile_show}}">
                <colgroup>
                    <col class="col-md-5">
                    <col class="col-md-7">
                </colgroup>
                <thead>
                    <tr>
                        <th>User Profile</th>
                        <th style="text-align: -webkit-right"><button class="btn-primary btn" id = "editUserProfile_button" ng-click = "editUserProfile()">Edit User Profile</button></th>
                    </tr>
                </thead>
<table>

点击功能后的HTML视图：

$scope.editUserProfile = function(){
            $scope.editUserProfile_show  = true;
            $scope.userProfile_show  = false;
            $http.get('/user/profile/?user_id=559f6d43cd9e9cfd07422baa', {headers:{'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'}
            }).success(function (response) {
                console.log(response.data);
                $scope.userProfile = response.data;
            });
        };

当我点击按钮时，ng-hide类被添加到第一个表editUserprofile中。当我删除ng-hide类时，这个表是可见的，但是第二个表仍然可见，尽管它的ng-show是false。期待，问题与$ scope有关。

Answer 1

您不需要字符串插值，即{{ }}和ngShow指令，它需要expression。如果expression为truthy，则分别显示或隐藏元素。

如果您传递任何字符串值"true"或"false"，它将评估为truthy，因此将始终显示元素。

使用

ng-show = "editUserProfile_show"

而不是

ng-show = "{{editUserProfile_show}}"

Answer 2

您只需要在范围中定义一个变量。在两个表的html中使用相同的范围属性，但是对于一个表，将其映射到ng-show，而另一个表将相同的属性映射到ng-hide。现在，基于范围属性，在任何给定时间只显示一个表。

在按钮的ng-click上，只需更改attribute上的scope。

在控制器中： $ scope.onShowClickEvent = function（）{ $ scope.editUserProfile = TRUE; }

$scope.onHideClickEvent = function(){
  $scope.editUserProfile=false;
}

在视图上：

<table class="table ..." id="editUserProfile" ng-show="editUserProfile">
 ....
</table>

<table class="table ..." id="userProfile" ng-show="editUserProfile">
 ....
</table>

希望这有帮助。

Answer 3

$scope.editUserProfile = function(){
        $scope.editUserProfile_show  = true;
        $scope.userProfile_show  = false;
        $http.get('/user/profile/?user_id=559f6d43cd9e9cfd07422baa', {headers:{'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'}
        }).success(function (response) {
            console.log(response.data);
            $scope.userProfile = response.data;
            $scope.editUserProfile_show  = false;
            $scope.userProfile_show  = true;
        });
    };


 var refresh = function(){
        /** Driver Profile Data */
        $scope.userProfile_show  = true;
        $scope.editUserProfile_show  = false;
        $http.get('/user/profile/?user_id='+$location.search()['driverID'], {headers:{'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'}
        }).success(function (response) {
            $scope.userProfile = response.data;
            $scope.userProfile_show  = false;
            $scope.editUserProfile_show  = true;
        });

        });
    }

成功时您需要更改范围变量的值，然后才会反映

您需要更改值$ scope.userProfile_show＆amp; $ scope.editUserProfile_show成功如上所述。

从控制器设置ng-show值但我的代码不起作用

3 个答案: