Немедленно удалить кнопку со страницы HTML, когда пользователь решит удалить ее

Question

Немедленно удалить кнопку со страницы HTML, когда пользователь решит удалить ее

0

Я начинаю обойти Angular JS.

У меня есть небольшое требование. Я хочу, чтобы пользователи имели возможность удалять определенные кнопки, если они того пожелают. И поэтому я хочу, чтобы кнопка сразу исчезла со страницы, как только пользователи нажимают знак закрытия (x).

Каков наилучший способ достичь этого?

Один из методов, о котором я думал, - это обновить страницу и снова загрузить данные. Поскольку я использую маршруты, я чувствую, что просто вызов маршрута с помощью ui-sref выполнит эту работу. Но почему-то это не работает для меня.

Ниже приведен фрагмент кода.

маршрут

$stateProvider.state('DefaultSources',{
    url:'/DefaultSources',
    templateUrl:'/static/app/service/template/default_sources.html'
  })
.state('ChannelSources',{
    url:'/ChannelSources/:ch_id',
    templateUrl:'/static/app/service/template/channel_sources.html'
  })

HTML

<div id="grid_ch">
  <button class="a" ui-sref='ChannelSources({ch_id: userch})' ng-click='channelSelected(userch)' ng-repeat="userch in userChannels">
    <span class="close" ui-sref='DefaultSources' ng-click='deleteChannel(userch)'>&times;</span>
    <p>{{ userch }}</p> 
  </button>
</div>

Когда пользователь нажимает кнопку закрытия (x), вызывается функция functon deleteChannel(), которая удаляет данные из БД. Я хотел бы перейти на DefaultSources после каждого щелчка, потому что базовый код для DefaultSources попадает в БД и заполняет свежие данные, что было бы очень похоже на выполнение обновления.

Однако этот метод, похоже, не работает, так как я новый AngularJS, я не могу думать о способах отладки.

Я бы очень признателен за любую помощь или руководство.

Sam 20 июль 2016, в 22:23

Источник

1

Почему бы просто не щелкнуть флагом и спрятать кнопку - и тогда при перезагрузке ваш серверный код будет обрабатывать его не показывая, поскольку он не существует? Без обратной передачи и перезагрузки <button ng-init="canSee=true; ng-if="canSee" class="a" ui-sref='ChannelSources({ch_id: userch})' ng-click='channelSelected(userch); canSee=false;' ng-repeat="userch in userChannels">
tymeJV 20 июль 2016, в 20:06

Теги:

jquery

html

angularjs

2 ответа

Ещё вопросы

Почему бы просто не щелкнуть флагом и спрятать кнопку - и тогда при перезагрузке ваш серверный код будет обрабатывать его не показывая, поскольку он не существует? Без обратной передачи и перезагрузки <button ng-init="canSee=true; ng-if="canSee" class="a" ui-sref='ChannelSources({ch_id: userch})' ng-click='channelSelected(userch); canSee=false;' ng-repeat="userch in userChannels">

mahi-man · Answer 1 · 2016-07-20T18-25-00.000Z

Чтобы развернуть комментарий выше, добавьте ng-if к кнопке:

<button class="a" ui-sref='ChannelSources({ch_id: userch})' ng-click='channelSelected(userch)' ng-repeat="userch in userChannels" ng-if="!userch.deleted">
    <span class="close" ui-sref='DefaultSources' ng-click='deleteChannel(userch)'>&times;</span>
    <p>{{ userch }}</p> 
</button>

а затем в вашей функции deleteChannel сделайте userch.deleted = true чтобы он удалил кнопку

Keith O · Answer 2 · 2016-07-20T17-23-00.000Z

Вы можете с легкостью удалить userch из списка userChannels, когда они нажмут delete. Это обеспечило бы то, что вы хотите, без необходимости перезагружать данные вообще, но вам нужно будет иметь обработку на странице, если HTTP-запрос не был успешным

Проблема, если вы хотите, чтобы это была ссылка, заключается в том, что ui-sref не будет работать на промежутке или кнопке, потому что они не поддерживают теги href. Кроме того, я не думаю, что вы можете иметь ng-click и href в одном и том же элементе, оба этих действия не будут выполнены.

После вызова функции вам нужно будет перенаправить контроллер.