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

Posted 2023-03-07

【中文标题】从控制器设置 ng-show 值但我的代码不起作用

【英文标题】：Setting ng-show value from controller but my code is not working

【发布时间】：2015-10-21 09:12:27

【问题描述】：

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

页面加载代码：controller.js

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();

html 代码：

<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>

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

editUserProfile() 的控制器代码

$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;
            );
        ;

点击后HTML视图功能：

<table class="table ng-hide" id="editUserProfile" ng-show="true">
                <thead>
                    <tr>
                        <td>Property</td>
                        <td>Value</td>
                    </tr>
                </thead>
</table>

<table class="table" id="userProfile" ng-show="false">
                <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>
</table>

当我单击按钮时，会将 ng-hide 类添加到第一个表 editUserprofile。当我删除 ng-hide 类时，这个表是可见的，但是第二个表仍然可见，尽管它的 ng-show 是假的。预计，问题与 $scope 有关。

【参考方案1】：

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

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

在控制器中： $scope.onShowClickEvent = 函数（） $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>

希望这会有所帮助。

【参考方案2】：

$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 变量的值，然后它才会反映

您需要在成功时更改 $scope.userProfile_show 和 $scope.editUserProfile_show 的值，如上所述。

【参考方案3】：

您不需要字符串插值，即带有ngShow 指令的 ，它需要expression。如果expression 是truthy，则元素分别显示或隐藏。

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

使用

ng-show = "editUserProfile_show"

而不是

ng-show = "editUserProfile_show"