lundi 26 décembre 2016

Assigning unique models and ids to checkboxes within ng-repeat

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" 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 "></span>
                <h1 class="radio-accordion-header-title text-blue"></h1>
            </div>
        </div>
        <div class="radio-accordion-header-right"></div>
        <label class="expander-blue" for="input"></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"
                       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"><em>I like this animal</em></label>
            </div>
        </div>
    </div>
</li>

`

Any help appreciated!




Aucun commentaire:

Enregistrer un commentaire