Если один из вариантов ng-hide и ng-show или использовать только один с разными значениями

-3

Мой вопрос касается наилучшей практики/предпочтительной читаемости в Angular 1.X с ng-show и ng-hide.Если один из вариантов ng-hide и ng-show или использовать только один с разными значениями

При использовании ng-hide и ng-show рекомендуется ли оно придерживаться одного и изменять значение, которое я оцениваю, или я должен чередоваться между ними, чтобы сохранить значение в выражении одинаковым?

См. Следующие примеры. Является предпочтительным по сравнению с другим, и если да, то почему?

Предположим, что есть только два состояния, sportSelected может быть хоккеем или футболом, то есть есть два состояния.

Использование только нг-шоу и переключение значение

<div class="col-xs-4" ng-show="vm.sportSelected=='hockey'"> 
     NJ Devils 
    </div> 
    <div class="col-xs-4" ng-show="vm.sportSelected=='football'"> 
     NY Jets 
    </div> 
    <div class="col-xs-4" ng-show="vm.sportSelected=='football'"> 
     NY Giants 
    </div>

чередуя нг-шоу и нг-шкуры, чтобы сохранить значение то же

<div class="col-xs-4" ng-show="vm.isHockeySelected"> 
     NJ Devils 
    </div> 
    <div class="col-xs-4" ng-hide="vm.isHockeySelected"> 
     NY Jets 
    </div> 
    <div class="col-xs-4" ng-hide="vm.isHockeySelected"> 
     NY Giants 
    </div>

Верхний кажется более ясно, но это может быть просто из-за неправильных имен методов и переменных. Я просматриваю угловую документацию, и я, похоже, не понимаю, что это за предпочтительный результат. Один из них предпочтительнее другого?

Edit: Помеченное это будет закрыто, я понял это довольно мнение, основанное как закладки против пространств, хотя я думаю, что одно решения имеет преимущество по сравнению с другой

источник

2016-08-02 Frank Visaggio

Они не делают то же самое. Первый не будет показывать ничего, если выбрана опция BasketBall, которая, вероятно, вы хотите. Второй покажет NY Jets и NY Giants, если выбран BasketBall, который, вероятно, не тот, который вы хотите. Даже если у вас просто есть хоккей и футбол, выберите семантически правильный вариант: вы, вероятно, хотите, чтобы NY Jets появлялись, если футбол выбран, а не хоккей. –

Есть только два варианта или состояния, которые я должен был указать. Также это может быть неудобным примером, поскольку это метафора для чего-то еще, над чем я работаю, и не могу поделиться точными деталями. –

Это не меняет мою точку зрения. Если вы представите третий вариант, вы хотите, чтобы ваш код по-прежнему работал должным образом. И только первый вариант будет делать это, потому что правило заключается в том, что «NY Jets» должно отображаться только в том случае, если выбран Футбол. Правило не «NY Jets» должно отображаться, если хоккей не выбран. –

ng-hide и ng-show оба работают по-разному. Они по сути являются классами CSS, которые либо скрывают, либо показывают указанный div, в зависимости от того, как оценивается значение.

<!-- when $scope.myValue is truthy (element is visible) --> 
<div ng-show="myValue"></div>

если MyValue оценивается как истина, то DIV будет видно

<!-- when $scope.myValue is falsy (element is hidden) --> 
<div ng-show="myValue" class="ng-hide"></div>

Однако, во втором примере, DIV будет скрыто, как класс устанавливаются равной нг скрытия.

также вы можете запустить ng-show или ng-hide, чтобы проверить, если значение оценивается как ложное, так как: <div ng-show="!myValue"></div>

В связи с характером цикла дайджеста в Угловое, эти проверки будут побежал на странице загрузки. Если вы не хотите, чтобы div отображался на странице, можно рекомендовать использовать ng-if, а не ng-show или ng-hide, так как он не будет загружаться на страницу, а не просто скрывать его.

В нижеприведенном фрагменте вы увидите пример, который работает как для ng-hide, так и для ng-show, используя значение значения ng-model значение отклика ввода флажок «checked». Что дает ответ boolean.

При нажатии на это значение для 'checked' оценивается в true. Когда он не разблокирован, значение оценивается как false. Когда ng-модель оценивается как false, она отображает div ng-hide, когда ng-model evalutes to true, показывает div ng-show.

Дальнейшее чтение здесь: Angular ng-show documentation

@import url(../../components/bootstrap-3.1.1/css/bootstrap.css); 
 
.animate-show { 
 
    line-height: 20px; 
 
    opacity: 1; 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    background: white; 
 
} 
 

 
.animate-show.ng-hide-add, .animate-show.ng-hide-remove { 
 
    transition: all linear 0.5s; 
 
} 
 

 
.animate-show.ng-hide { 
 
    line-height: 0; 
 
    opacity: 0; 
 
    padding: 0 10px; 
 
} 
 

 
.check-element { 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    background: white; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-ng-show-production</title> 
 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
 
    
 

 
    
 
</head> 
 
<body ng-app="ngAnimate"> 
 
    Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br/> 
 
<div> 
 
    Show: 
 
    <div class="check-element animate-show" ng-show="checked"> 
 
    <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked. 
 
    </div> 
 
</div> 
 
<div> 
 
    Hide: 
 
    <div class="check-element animate-show" ng-hide="checked"> 
 
    <span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked. 
 
    </div> 
 
</div> 
 
</body> 
 
</html> 
 

 
<!-- 
 
Copyright 2016 Google Inc. All Rights Reserved. 
 
Use of this source code is governed by an MIT-style license that 
 
can be found in the LICENSE file at http://angular.io/license 
 
-->

источник

2016-08-03 02:03:43 amyloula

потрясающий пост все еще читающий его –

-1

ли или не использовать вы ng-hide или ng-show должен быть на основе того, как вы хотите, чтобы страница отображалась по умолчанию. Если вы контролируете видимость элемента, который будет скрыт по умолчанию и отображается только после того, как пользователь выполнит какое-либо действие (например, выбрав спорт), вы хотите использовать ng-show. Если элемент должен отображаться по умолчанию и только скрыт после некоторого действия пользователя (возможно, div, который говорит «выберите спорт», который исчезает после выбора вида спорта), вы хотите использовать ng-hide.

Использование этих директив будет способствовать большей читабельности, чем беспокоиться о том, как указано условие boolean. Это также имеет важное практическое преимущество. Если вы используете ng-hide для чего-то, что должно быть скрыто по умолчанию, вы можете видеть мерцание элемента каждый раз, когда вы загружаете страницу, потому что в начале цикла $ digest до того, как ваша область может быть полностью оценена, результат этого условия будет ложным , который заставит элемент появляться ненадолго, прежде чем он исчезнет.

У вас есть правильная идея в верхнем примере (похоже, что у вас проблема с синтаксисом с кавычками).

источник

2016-08-03 01:43:36 wrshawn

Если один из вариантов ng-hide и ng-show или использовать только один с разными значениями

ответ

Смежные вопросы