Angular: как отключить тег привязки из массива (ng-repeat) тегов привязки

У меня есть ng-repeat тегов привязки, который отображает список интерактивных членов группы:

<a href="#/contact/{{ ::member.fullProfile.xpid }}" ng-click="storeRecentContact(member.fullProfile.xpid)" class=" GroupRow ListRow ListRow-Contact vmsection ng-class:{'last': $last}" ng-class-odd="'ListRowOdd'" ng-class="{'ListRowLast':$last}" data-ng-repeat="member in group.members | filter: searchFilter() | orderBy: [selectedSort.type, 'fullProfile.displayName'] track by member.xpid" droppable="Call" ng-disabled="member.contactId == myself.contactId">

Как вы можете видеть в конце тега привязки, я пытаюсь отключить 1 из элементов ng-repeat, точнее, тег привязки меня/себя.

myself.contactId

и

member.contactId

будет таким же в теге привязки, представляющем моего пользователя. Тем не менее, это все еще не отключает мою возможность щелкнуть по тегу привязки моего собственного члена группы. Правильно ли я использую ng-disabled? Или, альтернативно, есть ли другой способ выполнить это?


javascript angularjs anchor angularjs-ng-repeat disabled-input
person Seeeyonnn    schedule 06.06.2015    source источник
comment
В atag нет отключенного атрибута. Ng-disabled работает только с тегами с отключенным атрибутом.   -  person Michelangelo    schedule 06.06.2015

Ответы (2)


arrow_upward
2
arrow_downward

Вы не можете отключить тег привязки <a>, вы должны попробовать более простой способ сделать это, обрабатывая логику самого html, используя && проверку, например, первую проверку member.contactId != myself.contactId, и если это правда, то только метод storeRecentContact(member.fullProfile.xpid).

здесь вы ng-click должны выглядеть как ng-click="member.contactId != myself.contactId && storeRecentContact(member.fullProfile.xpid)", теперь вы можете удалить директиву ng-disabled, которая бесполезна.

Разметка

<a href="#/contact/{{ ::member.fullProfile.xpid }}" 
ng-click="member.contactId != myself.contactId && storeRecentContact(member.fullProfile.xpid)" 
...other attributes..
.....
></a>

Небольшой демонстрационный план

Обновить

Чтобы остановить перенаправление вашей ссылки на другую страницу, вы можете использовать директиву ng-attr, которая установит значение тега href (где вы хотите перенаправить свой SPA) с помощью выражения оценки {{}}. Если вы хотите перенаправить на #/contact/1, тогда ваш href будет href="#/contact/{{ ::member.fullProfile.xpid }}", иначе он будет просто href="" пустым. Предположим, что вы используете условие, что member.contactId не должно быть равно member.contactId, например member.contactId != myself.contactId, тогда вы не хотите, чтобы пользователь перенаправлял ваш SPA на страницу контактной информации. Эта вещь будет обрабатываться {{member.contactId != myself.contactId' ? #/contact/'+ member.fullProfile.xpid: '' }} из ng-attr-href, это изменит значение атрибута href на основе выражения {{}}

<a ng-attr-href="{{member.contactId != myself.contactId' ? #/contact/'+ member.fullProfile.xpid: '' }}" 
   ng-click="member.contactId != myself.contactId &&  storeRecentContact(member.fullProfile.xpid)" 
   ...other attributes..
   .....
></a>
person Pankaj Parkar    schedule 06.06.2015
comment
Спасибо @pankajparkar, но это не работает. Я почти уверен, что функция ng-click storeRecentContact — это не то, что позволяет щелкнуть элемент, а тот факт, что это тег привязки, делает его доступным для кликов. - person Seeeyonnn; 06.06.2015
comment
@Seeeyonnn см. здесь демо plunkr plnkr.co/edit/lTCv8BlvtTRRfqGFWDnR?p=preview ты должен был что-то пропустить - person Pankaj Parkar; 06.06.2015
comment
Думаю, ваш плункер упускает из виду мой ng-repeat тегов привязки. Я изучаю ваше обновление относительно: ng-attr, @pankajparkar, может быть, вы можете немного уточнить? - person Seeeyonnn; 06.06.2015
comment
^ — это перенаправление, которое я пытаюсь остановить. Я хочу перенаправить на этот href, ЕСЛИ ИСКЛЮЧИТЕЛЬНО, member.contactId == self.contactId... - person Seeeyonnn; 06.06.2015
comment
@Seeeyonnn Я думаю, что теперь стало понятнее .. попробуйте предложенный, пожалуйста. и дайте мне знать .. он работает или нет - person Pankaj Parkar; 06.06.2015
comment
@Seeeyonnn Рад, что это работает .. вы могли бы задать вопрос .. если вам что-то непонятно .. - person Pankaj Parkar; 06.06.2015
comment
Давайте продолжим обсуждение в чате. - person Seeeyonnn; 06.06.2015

arrow_upward
1
arrow_downward

ng-disabled создает отключенный атрибут, который используется только для входных данных.

Тег привязки не является входом, поэтому его нельзя отключить. Что вы хотите сделать, так это изменить способ решения этой проблемы. Возможно, вы захотите скрыть его (элемент a), вам может понадобиться директива для удаления href или замены его на «#» или что-то в зависимости от вашего состояния.

Вы также можете сделать:

ng-href="{{getRef(member, mySelf)}}" и рассчитайте это с вашего контроллера. Если ваше условие ложно и это должно отображаться нормально, просто верните обычную ссылку. В противном случае вы можете вернуть #:

$scope.getRef = function(member, myself) {
    if (member.contactId == myself.contactId) { 
        return "#";
    }
    else {
        return "#/contact/" + member.fullProfile.xpid;
    }
}
person Omri Aharon    schedule 06.06.2015
comment
это повлияет на маршрутизацию, и в результате SPA перепутается - person Pankaj Parkar; 06.06.2015
comment
@Omri Aharon это приводит к ошибке javascript, так как член не может быть прочитан - попробовал и $scope.member, и член в коде js... - person Seeeyonnn; 06.06.2015
comment
@Seeeyonnn, попробуйте обновленный. Он пропустил этот параметр. - person Pankaj Parkar; 06.06.2015
comment
Спасибо, оба ответа сработали, эти параметры функции были необходимы. Тем не менее проголосовали за время, потраченное вами обоими - person Seeeyonnn; 06.06.2015
comment
@Seeeyonnn Рад помочь тебе, братан. Я думаю, ты понял концепцию. :) - person Pankaj Parkar; 06.06.2015