Javascript 从控制器设置ng显示值，但我的代码不起作用

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

单击函数后的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为false。预期问题与$scope相关

您不需要字符串插值，即带有指令的

{{}

，它需要一个字符串。如果是

truthy

，则分别显示或隐藏元素

如果您传递任何字符串值

“true”

或

“false”

，它将计算为

truthy

，因此元素将始终显示

使用

而不是

---

您不需要字符串插值，即带有指令的

{{}

，它需要一个字符串。如果是

truthy

，则分别显示或隐藏元素

如果您传递任何字符串值

“true”

或

“false”

，它将计算为

truthy

，因此元素将始终显示

使用

而不是

成功后，您需要更改范围变量的值，然后只有它会反映

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

成功后，您需要更改范围变量的值，然后只有它会反映

---

如上所述，成功后需要更改$scope.userProfile\u show和$scope.editUserProfile\u show的值。

您只需要在范围中定义一个变量。在两个表的html中，使用相同的范围属性，但对于一个表，将其映射到

ng show

，对于另一个表，将相同的属性映射到

ng hide

。现在，根据scope属性，在任何给定时间都只显示一个表

在

ng上单击按钮的

，只需更改

范围

上的

属性

在控制器中： $scope.onShowClickEvent=函数（）{ $scope.editUserProfile=true； }

关于这一观点：

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

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

....
....

---

希望这有帮助。

您只需要在范围中定义一个变量。在两个表的html中，使用相同的范围属性，但对于一个表，将其映射到

ng show

，对于另一个表，将相同的属性映射到

ng hide

。现在，根据scope属性，在任何给定时间都只显示一个表

在

ng上单击按钮的

，只需更改

范围

上的

属性

在控制器中： $scope.onShowClickEvent=函数（）{ $scope.editUserProfile=true； }

关于这一观点：

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

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

....
....

希望这有帮助

ng-show = "{{editUserProfile_show}}"

$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.onHideClickEvent = function(){
  $scope.editUserProfile=false;
}

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

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