Question

我试图让一个简单的ng-show工作，但它失败了这不起作用

<h1>Company Files</h1>
<p>Please select which company file you'd like to work with &amp; login to it</p>
<ul class="list-group" >
  <li class="list-group-item" ng-repeat="file in files" >
    <h5><a data-toggle="collapse" data-parent="#accordion"ng-if="!file.CheckedOutBy" ng-click="show = !show">
        <i class="fa fa-check-square-o pull-right" style="color: green;"></i>
        {{file.Name}}
    </a></h5>

    <span ng-if="file.CheckedOutBy != null" class="text-muted">
        <i class="fa fa-external-link pull-right" style="color: red;"></i>
        {{file.Name}}
    </span>

        <div class="panel panel-default" ng-show="show">
            <div class="panel-body">
                <p class="lead">Enter the username and password for this file</p>
                <form class="form-horizontal" role="form">
                  <div class="form-group">
                    <label for="inputUsername3" class="col-sm-2 control-label">Username</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="inputUsername3" placeholder="Username">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                  </div>
                </form>
            </div>
        </div>

  </li>
</ul>

然而，如果我把SHOW项目放在H5里面......好吧它可以工作但是你不能点击表格，它只是再次关闭它（这是有道理的，毕竟它已经嵌套了）

<h1>Company Files</h1>
<p>Please select which company file you'd like to work with &amp; login to it</p>
<ul class="list-group" >
  <li class="list-group-item" ng-repeat="file in files" >
    <h5><a data-toggle="collapse" data-parent="#accordion"ng-if="!file.CheckedOutBy" ng-click="show = !show">
        <i class="fa fa-check-square-o pull-right" style="color: green;"></i>
        {{file.Name}}

        <div class="panel panel-default" ng-show="show">
            <div class="panel-body">
                <p class="lead">Enter the username and password for this file</p>
                <form class="form-horizontal" role="form">
                  <div class="form-group">
                    <label for="inputUsername3" class="col-sm-2 control-label">Username</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="inputUsername3" placeholder="Username">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                  </div>
                </form>
            </div>
        </div>
    </a></h5>

    <span ng-if="file.CheckedOutBy != null" class="text-muted">
        <i class="fa fa-external-link pull-right" style="color: red;"></i>
        {{file.Name}}
    </span>

  </li>
</ul>

对我做错了什么的任何想法。我看一下这个小提琴（在Stackoverflow上找到）并且看起来相同http://jsfiddle.net/wD7gR/102/但是一个正常工作

我认为它与SHOW的范围有关但是......;（

控制器看起来很简单 - 它从localstorage加载一些数据 - 只是一个json文件

// home page controller
todoApp.controller('cfController', function($scope, $location, localStorageService, fetch) {
    /// do we already know what 

    fetch.getCompanyfiles()
        .then(function(){
            // load data
        });
});

Answer 1

尝试

ng-show="$parent.show"

ng-repeat创建了它自己的范围，这就是为什么：D并且你的div在ng-repeat中。因此，当ng-click上的<h5>与.panel具有相同重复和相同范围时，为什么会有效。

希望有所帮助！

Answer 2

所以我从头开始很容易地再现了那个小例子。显而易见的是，相当直接的实施工作。我无法重现你的问题。

http://jsfiddle.net/j5ku9/

我尝试删除你周围的代码层并简化操作。我想知道的罪魁祸首是你与棱角混合的一些引导代码。 Bootstrap不是有角度的，当您添加利用javascript将其行为注入页面的引导程序组件时，它不能很好地处理角度。像angular-ui这样的项目可以更好地将引导程序组件集成到页面中，使角度更新UI的方式。

我首先删除此代码：

<a data-toggle="collapse" data-parent="#accordion"...>
   ....
</a>

这是添加折叠组件，但您不需要它，因为angular会为您执行此操作。我还删除了ng-if，因为它会对您的页面造成严重破坏，因为它会从DOM中删除整个节点，而ng-show只是隐藏了该元素。

我将其剥离到仅使用角度和添加背部的基本要素，以找出技术干扰您的代码。

Answer 3

发现它......

 ng-if="!file.CheckedOutBy"

这干扰了节目..所以我正在改变我的块

ng-show不适用于简单的Div

3 个答案: