Використовуйте ng-repeat і маєте один елемент списку обов'язковий - html, angularjs

Я "вивчаю AngularJs (v1.6), використовуючи Angular Material, і я" застряг у невеликій, але докучливій проблемі з дисплеєм.

Я створив простий перелік предметів (фруктів) зперемикає кнопки. Користувач може ввімкнути кнопку, якщо є фрукти. Я використовував ng-repeat для відображення кожного елемента мого списку ... Потім я намагався отримати лише одну з моїх кнопок перемикачів обов’язковою, тому я вживав слово "обов'язково" ... ось так:

HTML:

<md-list-item ng-repeat="(key, value) in $ctrl.vegetables.fruits">
<p>{{"vegetables.fruits." + key | translate}}</p>
<md-switch class="md-primary" ng-model="$ctrl.vegetables.fruits[key]" required>
<br/>
<div  class="warning" ng-show="key === "banana"" >Ce champ est obligatoire</div>
</md-switch>
</md-list-item>

Але якщо я поміщу це в md-switch div, всіпункти мого списку обов’язкові ... Якщо я відображаю елементи мого списку по одному, я можу зажадати лише один елемент .. але я хотів би зберегти ng-repeat.

Отже, це моє запитання: як я можу зробити, щоб лише один із моїх предметів був обов’язковим?

Дякую

Відповіді:

Я думаю, що це так, як ви хочете:

<md-list-item >
<p ng-repeat-start="(key, value) in $ctrl.vegetables.fruits">{{"vegetables.fruits." + key | translate}}</p>
<md-switch ng-repeat-end class="md-primary" ng-model="$ctrl.vegetables.fruits[key]" required>
<br/>
<div  class="warning" ng-show="key === "banana"" >Ce champ est obligatoire</div>
</md-switch>
</md-list-item>