标签: angularjs-ng-show

我试图理解ng-if和ng-show/ 之间的区别ng-hide,但它们看起来和我一样.

我是否应该记住选择使用其中一种？

我认为这将是一个非常普遍的事情,但我找不到如何在AngularJS中处理它.假设我有一个事件列表并希望使用AngularJS输出它们,那么这很简单:

<ul>
    <li ng-repeat="event in events">{{event.title}}</li>
</ul>

但是当列表为空时我该如何处理？我希望有一个消息框,其中列表中包含"无事件"或类似内容.唯一可以接近的是ng-switchwith events.length(如果对象而不是数组,我如何检查是否为空？),但这真的是我唯一的选择吗？

如何检查范围变量是否未定义？

这不起作用:

<p ng-show="foo == undefined">Show this if $scope.foo == undefined</p>

我在ng-repeat块中使用ng-show指令时遇到问题.

布尔值似乎没有正确传递给ng-show ...

为了表明我的意思,这里是我在JSFiddle中做的一个例子的截图:

这是一些示例标记:

<table ng-controller="ActressController" class="table table-bordered table-striped">
    <tr ng-repeat="actress in actressList">
        <td>
            <span class="actress-name">{{ actress.name }}</span>
            <h4 ng-show="{ actress.name == 'Scarlett' }">Was in Avengers! <span class="note">(should only appear if Scarlett)</span></h4>
            <h2>{{ actress.name == 'Scarlett'}} <span class="note"><-- this statement is correct</span></h2>

        </td>

    </tr>
</table>

这是一个示例控制器:

function ActressController($scope) {
    $scope.actressList = [
        {
            name: "Angelina"
        }, {
            name: "Scarlett"
        }, {
            name: 'Mila'
        }, {
            name: 'Megan'
        }
    ]        

}

关于我可能做错的任何想法？

我正在使用AngularJS编写一个Web应用程序.用户最多向服务器提交3个关键字.只有在有足够的关键字时,我想在关键字之间显示逗号.

例如:

如果没有关键字,那么:

如果有1个关键字,则:关键字

如果有2个关键字,则:关键字,关键字

如果有3个关键字,则:关键字,关键字,关键字

我有以下代码:

    <tr>
       <td>Keywords: </td>
       <td>{{post.Keyword1}} <span ng-show = "{{post.Keyword2}}">,</span> {{post.Keyword2}} <span ng-show = "{{post.Keyword3}}">,</span> {{post.Keyword3}}</td>
    </tr>

为什么这不起作用？

我有一个旋转器显示 ng-show="loading>0"

有没有办法可以延迟显示这个微调器(比如1秒)？

我不能使用超时,因为多个请求加载计数器将不同步.

我需要的是ng-show通过css转换或类似的延迟

我希望显示每个窗口小部件类别的概述,以便在选择该窗口小部件类别时显示在筛选结果上方.

我假设这将需要一个ng-show指令,所以也许需要一些控制器代码.但任何关于将选择下拉列表与我的ng-repeat连接并与ng-show链接的指针都会很棒.

这是我的目标:

之前

后

    <ion-view title="Select Box Filter" id="page6" class=" ">
            <ion-content padding="true" class="has-header">
                <ion-list id="tListSelectFilter-list11" class=" ">
                    <label class="item item-select " id="tListSelectFilter-select1">
                        <span class="input-label">Select</span>
                        <select></select>
                    </label>
                    <ion-item id="tListSelectFilter-list-item25" class="  ">Widget Range 1</ion-item>
                    <ion-item id="tListSelectFilter-list-item26" class="  ">Widget Range 2</ion-item>
                    <ion-item id="tListSelectFilter-list-item27" class="  ">Widget Range 3</ion-item>
                </ion-list>
                <ion-item ng-repeat="product in products | filter:select" class="item-thumbnail-left item-text-wrap"
                  href="#/tab/list/{{product.item}}">
                    <h2>Product Name: {{product.name}}</h2>
                    <h3>Quantity: {{product.quantity}}</h3>
                    <h2>Price: £{{product.price}}</h2>
                  </ion-item>
            </ion-content>
        </ion-view>


        <!--Widget Range 1 Overview Text - Here is an example of the overview text …

我有一个ng-repeat显示一个列表,divs当我点击一个时,它会显示div所点击项目的aditionnal .

这很有效

<div ng-repeat="item in items">

    <div ng-click="showfull = !showfull">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <div ng-show="showfull">
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>

我的项目是从包含项目列表的json加载的,每个项目都在此json中showfull设置了默认的attribut false.这是有效的,但现在我想在单击项目时隐藏列表中的所有其他项目.我尝试过这样的事情:

这不起作用

<div ng-repeat="item in items">

    <div ng-click="expand(item)">
        <div>
            <h1>{{item.title}}</h1>
            <p>{{item.content}}</p>
        </div>
    </div>
    <div ng-show="showfull">
        <p>{{item.info}}</p>
    </div>
    <hr/>
</div>

在控制器中我添加了一个功能:

$scope.expand = function(e) {
    e.showfull = !e.showfull;
    //TODO: put here a foreach logic to hide all other items
}

但即使没有foreach逻辑,这也不起作用,该项目在单击时不显示附加div.我有两个问题:

1. 我想这是由于item在expand函数中"通过副本传递" 或某种范围隔离问题,但你能详细解释一下为什么吗？ 解决了

2. 当我点击某个项目并显示该项目的附加内容时,如何隐藏其他所有其他项目？我需要做一个指令吗？ 没有解决

谢谢

我正在使用ng-show如下所示:

<data-ng-show={{entity.primary}}===true>

值entity.primary可以是true或false.我在控制台中收到以下错误:

语法错误:令牌'false'位于表达式[{3}]的第{2}列,从[{4}]开始.

如何解决这个错误？

我正在尝试在具有"ng-if"的图像上使用"ng-mouseover"指令并且它不起作用但是如果我使用"ng-show"指令它可以工作,大家能告诉我为什么吗？或者这是一个AngularJS问题？

在AngularJS文档中,我无法阅读有关它的任何内容:https://docs.angularjs.org/api/ng/directive/ngMouseover

NG-秀

<button ng-show="true" ng-mouseover="countOne = countOne + 1" ng-init="countOne=0">
Increment (when mouse is over)
</button>
Count: {{countOne}}

NG-如果

<button ng-if="true" ng-mouseover="countTwo = countTwo + 1" ng-init="countTwo=0">
Increment (when mouse is over)
</button>
Count: {{countTwo}}

小提琴:http://plnkr.co/edit/Wb6bjyJdHj5qoH7fxGFJ？p = info

我有一个ng-repeat,它有一个按钮,其功能可以在ng-repeat中切换ng-show元素.

类movie_option跨度内部有ng-click=toggleInfo($index):

div additional_info有一个显示或隐藏元素的ng-show.

    <ul ng-cloak="showResult">
        <li class="search_results" ng-repeat="movie in movies | orderBy: '-release_date'  track by $index">
            <div class="movie_info">
                <div class="movie_options">
                    <div class="slide">
                        <span class="movie_option">
                            <span><i class="fa fa-question-circle" aria-hidden="true" ng-click="toggleInfo($index)"></i></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="additional_info" ng-show="hiddenDiv[$index]">
                {{movie.overview}}
            </div>
        </li>
    </ul>

当用户点击图标时,它会调用此函数:

    $scope.toggleInfo = function (index) {
         $scope.hiddenDiv[index] = !$scope.hiddenDiv[index];
    }

这会从hiddenDiv ng-show切换ng-show状态.这很好用.

我想要做的是将所有hiddenDiv状态设置为false,除了单击的那个,因此只有一个ng-show是真的.

我可以修改Angular的ng-show和ng-hide的速度吗？jQuery有参数来修改show()和hide()的速度,所以我只是想知道是否可以用Angular完成.

谢谢