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>

`

任何帮助表示赞赏！

编辑：这是我所做的，以防将来帮助任何人！

<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个对象添加其他属性，或者这些对象中已存在可用作复选框指示符的属性，请使用：

ng-model="animal.SomeProperty"

另一种方法是使用单独的对象并使用$index作为每个键：

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

为ng-repeat

1 个答案: