Назначение уникальных моделей и идентификаторов флажкам в ng-repeat

Question

Я пытаюсь понять привязку данных к AngularJs, и я работаю над простой формой, которая использует ng-repeat для рендеринга набора аккордеонов. Заголовки каждого аккордеона имеют окно состояния, которое по умолчанию красное, но когда аккордеон расширяется, проверка флажка внутри должна включать зеленый цвет окна состояния.

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

Я знаю, что мне нужно назначить уникальную модель для каждого окна состояния/флажка, но я не уверен, как это сделать. Я видел несколько примеров с индексом $ index, но я не смог применить его к моей проблеме.

HTML, выглядит следующим образом:

<ul class="radio-accordion"> 
<li class="radio-accordion-item" ng-repeat="animal in ctrl.animalTypes"> 
    <input id="input{{$index + 1}}" type="checkbox" name="input" /> 
    <div class="radio-accordion-header grey"> 
     <div class="radio-accordion-header-left"> 
      <div class="radio-accordion-header-title-wrapper"> 
       <span class="status-led {{ctrl.checkedStatus}}"></span> 
       <h1 class="radio-accordion-header-title text-blue">{{animal.name}}</h1> 
      </div> 
     </div> 
     <div class="radio-accordion-header-right"></div> 
     <label class="expander-blue" for="input{{$index + 1}}"></label> 
    </div> 
    <div class="radio-accordion-body white"> 
     <div class="padd-10 marg-left40">    
      <div class="toolbar-flex marg-top-10 marg-bott0"> 
       <input class="restyled" 
         id="input{{$index + 1}}" 
         name="input" 
         type="checkbox" 
         ng-model="ctrl.checkedStatus" 
         ng-change="ctrl.setConsent()" 
         ng-true-value="'green'" 
         ng-false-value="'red'" /> 
       <label class="restyled-label" 
         for="input{{$index + 1}}"><em>I like this animal</em></label> 
      </div> 
     </div> 
    </div> 
</li> 

`

Любая помощь приветствуется!

EDIT: Это то, что я сделал в случае, если это поможет любому в будущем!

<ul class="radio-accordion"> 
<li class="radio-accordion-item" ng-repeat="animal in ctrl.animalTypes" ng-model="animal.checked> 
    <input id="input{{$index + 1}}" type="checkbox" name="input" /> 
    <div class="radio-accordion-header grey"> 
     <div class="radio-accordion-header-left"> 
      <div class="radio-accordion-header-title-wrapper"> 
       <span ng-class="{'status-led red': animal.checked == false, 'status-led green': animal.checked == true}"></span> 
       <h1 class="radio-accordion-header-title text-blue">{{animal.name}}</h1> 
      </div> 
     </div> 
     <div class="radio-accordion-header-right"></div> 
     <label class="expander-blue" for="input{{$index + 1}}"></label> 
    </div> 
    <div class="radio-accordion-body white"> 
     <div class="padd-10 marg-left40"> 
      <div class="toolbar-flex marg-top-10 marg-bott0"> 
       <input class="restyled" 
         id="input{{$index + 1}}" 
         name="input" 
         type="checkbox" 
         ng-model="animal.checked" 
         ng-change="ctrl.isChecked(animal.checked)" /> 
       <label class="restyled-label" 
         for="input{{$index + 1}}"><em>I like this animal</em></label> 
      </div> 
     </div> 
    </div> 
</li></ul> 

Answer 1

Если вы не обеспокоены добавления дополнительных свойств ваших animal объектов, или если уже существует свойство в тех объектах, которые будут использоваться в качестве индикатора CheckBox просто использовать:

ng-model="animal.SomeProperty" 

альтернативный способ заключается в использовании отдельного объекта и использовать $index как каждый ключ:

ng-model="ctrl.checkedStatus[$index]"