Question

我试图按下按钮＆＃34; Detalhes＆＃34;切换div以显示消息。

显然没有错。首先......我的HTML

            <tr ng-repeat="chamado in cabertos">
                            <td>{{chamado.numero}}</td>
                            <td>{{chamado.user}}</td>
                            <td>{{chamado.assunto}}</td>
                            <td>{{chamado.status_chamado}}</td>
                            <td><button ng-click="mostra()">Detalhes</button></td>
                        </tr>                               
                    </tbody>
                    <div ng-show="{{visivel}}">
                        <h3>Mensagem enviada:</h3>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                 </table>
            </div>

我的剧本：

app.controller('mostra',function($scope){       
    $scope.visivel = false;
    $scope.mostra = function() {
        if($scope.visivel==false) $scope.visivel=true;
        else if($scope.visivel == true) $scope.visivel=false;
    };
});

当我在我的页面中按F12时，由于一个未知的原因，有一个不允许我切换我的div的隐藏：

<div ng-show="false" class="ng-hide">
                        <h3>Mensagem enviada:</h3>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>

Answer 1

更改

<div ng-show="{{visivel}}">

要

<div ng-show="visivel">

编辑 - 添加解释为何会出现这种情况。我引用埃文，因为我无法解释这一点比他更好。

为什么会这样？

$ scope.visive1变量不需要进行插值在ng-show指令中使用双括号。 简而言之指令不需要大括号，而表达式需要它们 - @Evan Bechtol

Answer 2

你应该这样做

ng-show="visivel"

而不是

ng-show="{{visivel}}"

您看到class =＆＃34; ng-hide＆＃34;

的原因

因为你的ng-show是假的，所以angular应用了类ng-hide，它隐藏了元素，因为它与show相反，如果ng-show为true，它将删除该类。

此外，您不需要使用花括号（插值）以及预定义的角度JS指令，如ng-show，ng-hide，ng-if，ng-repeat。 Angular自己知道你传递给这些指令的是什么

Answer 3

当您刷新页面时，您重置了应用程序，因此您执行此操作：

$scope.visivel = false;

使div不可见..

Answer 4

尝试初始化控制器中的$scope.visivel = {}。

app.controller('mostra',function($scope){    
 $scope.visivel = {};   
    $scope.visivel = false;
    $scope.mostra = function() {
        if($scope.visivel==false) $scope.visivel=true;
        else if($scope.visivel == true) $scope.visivel=false;
    };
});

另外在HTML中使用 ng-show="visivel"代替ng-show="{{visivel}}"

AngularJS ng-show无效

4 个答案: