как написать эту логику и условие в ng-switch, чтобы избежать мерцания одного элемента на секунду, даже если условие не выполняется

У меня есть следующие две кнопки, которые должны отображаться при условии. У меня есть следующий код, он работает нормально, но единственная проблема заключается в том, что он мерцает и отображает одну кнопку и исчезает, даже если условие не выполняется.

Есть один способ решить эту проблему, используя ng-switch. Как это написать в ng-switch? Может ли кто-нибудь помочь мне с кодом и, возможно, со скрипкой.

  <button type="button" id="saveEnabled"  ng-click="ctrl.onClick()" ng-if="ctrl.Status !== 'Clicked'">Save</button>
    <button type="button" id="saveDisabled" disabled="disabled" ng-if="ctrl.Status === 'Clicked'">Saved</button>


ctrl.onClick = function() {
      ctrl.Status = 'Clicked';
  };

angularjs angularjs-directive angular-ng-if angularjs-scope ng-switch
person Jasmine    schedule 28.07.2016    source источник
comment
Можете выложить рабочий образец? Также я не понимаю вашей точной проблемы, что вы подразумеваете под «условием не выполняется», отображает одну кнопку и исчезает?   -  person Jason Goemaat    schedule 29.07.2016
comment
@JasonGoemaat: я смог написать конструкцию ng-swith, но она не помогает решить мою проблему с мерцанием.   -  person Jasmine    schedule 29.07.2016
comment
Я не могу понять вашу проблему, когда именно он мерцает?   -  person Jason Goemaat    schedule 29.07.2016
comment
@JasonGoemaat: Это очень просто, если вы посмотрите на приведенный выше код. Что я имею в виду под мерцанием, так это то, что когда я нажимаю кнопку «Сохранить», когда дом перезагружается, он должен показывать кнопку «Сохранено», и это так. Однако кнопка «Сохранить» также появляется на долю секунды и исчезает, чего я не хочу (видимо). Я попытался использовать ng-Switch, чтобы увидеть, помогает ли это, а не два ng-if сразу после друг друга, однако это тоже не помогает. Похоже, решить эту проблему не так-то просто   -  person Jasmine    schedule 29.07.2016
comment
Почему бы не убрать ng-if и оставить только одну кнопку с ng-disabled="ctrl.Status == 'Clicked'"   -  person kevin    schedule 29.07.2016
comment
То, о чем вы действительно говорите, - это загрузка страницы до того, как angular вступит во владение. Взгляните на этот вопрос . Если вы хотите что-то скрыть, пока angular не узнает, следует ли это отображать или нет, вы можете использовать ng-cloak   -  person Jason Goemaat    schedule 29.07.2016
comment
@ user2341963: Спасибо, но как это будет выглядеть или вести себя? Он все равно будет отображаться? Позвольте мне попробовать, но если у вас есть JSFiddle, дайте мне знать   -  person Jasmine    schedule 29.07.2016
comment
@JasonGoemaat: Да, я думал обо всех этих вариантах, но это не просто и не прямолинейно. Ng-cloack не поможет, но дай мне попробовать. Я также использовал debounce с 1000, и это тоже не помогло.   -  person Jasmine    schedule 29.07.2016
comment
По сути, ваш веб-браузер отображает ваш html перед запуском angular, подумайте об этом, как если бы вы вообще не включали angular на свою страницу, но использовали тот же html. Веб-браузер сначала получает ваш html и пытается отобразить его до запуска javascript. Лучшее, что вы можете сделать, это скрыть часть вашего кода и позволить angular отобразить его, когда он, наконец, дойдет до начальной загрузки. Вы можете использовать ng-cloak для этого, устанавливая скрытую страницу (или ее область) (отображение: нет) до тех пор, пока angular не загрузится и не покажет ее, когда она действительно может повлиять на отображаемые значения.   -  person Jason Goemaat    schedule 29.07.2016
comment
Попробуйте ответ от @ceckenrode. Я думаю, что вы увидите эти угловые скобки, и формула появится на долю секунды и мерцает, чтобы сказать «Сохранить» или «Сохранено», когда angular загружается и меняет текст на результат.   -  person Jason Goemaat    schedule 29.07.2016
comment
@JasonGoemaat: его ответ - это то, что мне было нужно. Но есть одна небольшая проблема: мне также нужно, чтобы кнопка была неактивна при сохранении.   -  person Jasmine    schedule 29.07.2016

Ответы (1)


arrow_upward
1
arrow_downward

Для чего-то такого простого вы могли бы использовать одну кнопку и тернарный оператор

 <button type="button" ng-attr-id="{{ctrl.Status !== 'saveEnabled' ? 'saveEnabled' : 'saveDisabled'}}" ng-click="ctrl.Status !== 'Clicked' ? ctrl.onClick() : return">{{ctrl.Status !== 'Clicked' ? 'Save' : 'Saved'}}</button>



ctrl.onClick = function() {
      ctrl.Status = 'Clicked';
  };
person ceckenrode    schedule 29.07.2016
comment
Спасибо, вроде работает нормально, но есть небольшая проблема. Как отключить кнопку, когда она показывает «Сохранено». Я имею в виду, что после нажатия «Сохранить» она меняет текст, но я также хочу, чтобы она была неактивна. - person Jasmine; 29.07.2016
comment
Будет ли это работать? Я получаю сообщение об ошибке, говорящее, что тег не может быть разрешен....disabled={{ctrl.Status === 'Clicked' ? «правда» : «ложь»}} - person Jasmine; 29.07.2016
comment
Я использовал ng-disabled={{ctrl.Status === 'Clicked'? 'true' : 'false'}} Не работает - person Jasmine; 29.07.2016
comment
вы можете использовать ng-disabled={{ctrl.Status === 'Clicked'}} я думаю, вам нужно передать литерал true или false вместо строки - person ceckenrode; 29.07.2016
comment
в худшем случае вы также можете сделать ng-class={disabled: ctrl.Status === 'Clicked'} - person ceckenrode; 29.07.2016
comment
Спасибо, к сожалению, оба подхода, предложенные выше, не помогают. Я также делаю некоторые пробы и ошибки .... пожалуйста, дайте мне знать, если вы знаете что-то еще - person Jasmine; 29.07.2016
comment
хм, ты используешь бутстрап? или, если нет, вы используете какие-либо CSS-фреймворки? - person ceckenrode; 29.07.2016
comment
Эй, большое спасибо, ваш синтаксис помог мне, за исключением небольшой настройки. Похоже, мы не должны использовать две угловые скобки в ng-disabled, так как он оценивается не в текущей области... прочитайте статью.... Это сработало для меня.... ng-disabled=ctrl.Status === ' Щелкнул' - person Jasmine; 29.07.2016
comment
Статья ниже и изменен ваш синтаксис с руководством из статьи ниже.... работал как шарм... большое спасибо :) yahooo, я счастлив.....stackoverflow.com/questions/20518691/ - person Jasmine; 29.07.2016
comment
Полезно знать! - person ceckenrode; 29.07.2016