Почему существует две директивы ng-show и ng-hide [duplicate]
Новый оператор прогноза MongoDB 2.2 $elemMatch MongoDB 2.2 предоставляет другой способ изменить возвращаемый документ, чтобы содержать только первый элемент shapes:
db.test.find(
{"shapes.color": "red"},
{_id: 0, shapes: {$elemMatch: {color: "red"}}});
Возвраты:
{"shapes" : [{"shape": "circle", "color": "red"}]}
В 2.2 вы также можете сделать это, используя $ projection operator , где $ в имени поля проекционного объекта представляет индекс первого совпадающего элемента массива поля из запроса. Следующее возвращает те же результаты, что и выше:
db.test.find({"shapes.color": "red"}, {_id: 0, 'shapes.$': 1});
MongoDB 3.2 Обновление
Начиная с версии 3.2 вы можете использовать новый $filter оператор агрегации для фильтрации массива во время проекции, который имеет преимущество включения всех , а не только первого.
db.test.aggregate([
// Get just the docs that contain a shapes element where color is 'red'
{$match: {'shapes.color': 'red'}},
{$project: {
shapes: {$filter: {
input: '$shapes',
as: 'shape',
cond: {$eq: ['$$shape.color', 'red']}
}},
_id: 0
}}
])
Результаты:
[
{
"shapes" : [
{
"shape" : "circle",
"color" : "red"
}
]
}
]
4 ответа
Они делают противоположное друг другу и могут использоваться по вашему желанию.
Я думаю, что это сводится к предпочтению кодирования, поскольку некоторым людям нравится писать свой код, чтобы использовать этот метод, если значение будет истинным, вместо использования не false!
<div ng-show="true">
вместо:
<div ng-hide="!true">
-
1Спасибо, как я думал, функционально эквивалентны и просто предпочтительны, спасибо очень! :) – Vistari 16 November 2015 в 17:01
ng-show и ng-hide применяют display: none !important к вашему html с помощью одной из этих директив. Между ng-show и ng-hide нет разницы: это только семантический и ваш выбор.
Итак, предположим, что у вас есть следующий html:
<div ng-show='condition'><p>{{text}}</p></div>
<div ng-hide='condition'><p>{{text}}</p></div>
Итак, в этом случае, если ваше условие true, тогда первая строка кода отобразит ваш html и скроет его, если ваше условие false. Вторая строка с ng-hide будет делать то же самое, но с противоположными условиями: она будет скрывать ваш html, если ваше условие true и показывает его, если условие false
-
1
Эти директивы различаются в одной строке:
ngShowDirective :
$animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
tempClasses: NG_HIDE_IN_PROGRESS_CLASS
});
ngHideDirective :
$animate[value ? 'addClass' : 'removeClass'](element,NG_HIDE_CLASS, {
tempClasses: NG_HIDE_IN_PROGRESS_CLASS
});
Просто против применения класса CSS ng-hide.
Как вы можете видеть, существует NG_HIDE_IN_PROGRESS_CLASS. Это класс ng-hide-animate css, который временно применяется в обоих случаях. Вы можете использовать его, чтобы анимировать элемент, который появляется / исчезает. Вы должны использовать два селектора для реализации двунаправленной анимации:
-
.animate-hideдля отображения -
.animate-hide.ng-hideдля hide
ng-show и ng-hide просто устанавливают отображение на «Нет», но ng-if фактически удаляет элемент из DOM.
Что касается производительности, я думаю, что он не делает никаких огромная разница, но поскольку ng-if удаляет все обработчики событий, прикрепленные к этому элементу и его дочерним элементам, а также элемент DOM, поэтому я думаю, что ng-show или ng-hide будут быстрее.