javascript - 从 Controller 设置 ng-show 值但我的代码不工作

Question

Angular js 的新手。我阅读了很多关于我的代码的解决方案。我面临的问题是，我有两张 table 。默认情况下，一张表是隐藏的，一张是可见的。当我点击按钮并想隐藏第二个表时，我想显示隐藏的表。当我单击按钮时，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() 的 Controller 代码

$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 有关。

Answer 1

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

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

使用

ng-show = "editUserProfile_show"

代替

ng-show = "{{editUserProfile_show}}"