0

Привет, есть некая группа Md-radio-button'ов, некоторые из них [disabled], как добавить текст к именно к тем, которые [disabled]. Вот планкер из прошлого вопроса:

https://plnkr.co/edit/ufz70Kx89YtWLglFPfck?p=preview

Пытаюсь сделать с помощью *ngIf, но не знаю, как поймать значение отключенной кнопки:

 <div class="block2">
  <md-radio-group class="delivery-addresses-list" [(ngModel)]="selectedCopyCountry">
    <md-radio-button *ngFor="let country of copycountries; let i = index" value="{{i}}" class="red" [disabled]="hasCountry(country)">
  <span>{{country.name}}</span>

      <span *ngIf="disabled">Choose another country</span>

     <br>
    </md-radio-button>
  </md-radio-group>
</div>

2 ответа 2

1

По тому же условию, по которому дизейблится радио:

<span *ngIf="hasCountry(country)">Choose another country</span>

Но такие вещи лучше делать через css чтобы не выполнять лишних операций:

<md-radio-button *ngFor="let country of copycountries; let i = index" value="{{i}}" class="red" [disabled]="hasCountry(country)">
<span>{{country.name}}</span>
  <span>Choose another country</span>
  <br>
</md-radio-button>

css:

md-radio-button span { display: none }
md-radio-button[disabled] span { display: inline-block }
4
  • попробовал и так и так, не работает, а если делать через *ngIf - то он скрывает все элементы
    – shoopik
    18 авг 2017 в 11:04
  • извиняюсь, не работает через ngIf, через CSS работает, но было бы интересно узнать как работает через ngIF
    – shoopik
    18 авг 2017 в 11:17
  • 1
    @shoopik, пробовал на вашем планкере - работает 19 авг 2017 в 5:01
  • хм, и правда, в планкере работает, но локально почему-то не хочет
    – shoopik
    19 авг 2017 в 18:52
1

Ты забыл про ref-ы #but в примере ниже.
Вот теория https://angular.io/guide/template-syntax#template-reference-variables--var-

<div class="block2">
   <md-radio-group class="delivery-addresses-list" 
       [(ngModel)]="selectedCopyCountry">
    <md-radio-button #but *ngFor="let country of copycountries; let i = index" value="{{i}}" class="red" [disabled]="hasCountry(country)">
    <span>{{country.name}}</span>

      <span *ngIf="but.disabled">Choose another country</span>

     <br>
    </md-radio-button>
  </md-radio-group>
</div>
1
  • спасибо большое)
    – shoopik
    18 авг 2017 в 16:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.