为ng-repeat中的复选框分配唯一的模型和ID

Question

I'm trying to understand data-binding with AngularJs and I'm working on a simple form that uses ng-repeat to render a set of accordions. The headings of each accordion has a status box that is red by default, yet when the accordion is expanded, checking the checkbox within should turn the status box green.

The problem I'm having is that when I check a checkbox, it turns the status box of each accordion heading green; not just the status box relevant to the checkbox.

I know I need to assign a unique model to each status box/checkbox but I'm unsure how. I've seen some examples with $index but I haven't been able to apply it to my problem.

The HTML is as follows:

<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>

`

Any help appreciated!

EDIT: This is what I did in case it helps anyone in the future!

<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

If you aren't concerned about adding additional properties to your animal objects , or if there already exists a property in those objects that would be used as checkbox indicator just use:

ng-model="animal.SomeProperty"

An alternate way is to use a separate object and use $index as each key:

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