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

Posted

技术标签:

【中文标题】从控制器设置 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"

【讨论】:

以上是关于从控制器设置 ng-show 值但我的代码不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Angular:ng-model 和 ng-show 不起作用

ng-show 在可操作的列中不起作用

一旦 ng-show div 移出整个 div,ng-click 将不起作用

链表创建一个新指针以添加值但不起作用

Woocommerce 加/减数量按钮更改值但实际上不起作用

ajax发布地理位置不起作用