指定ng-repeat中的複選框的獨特模型和ID

我試圖理解與AngularJs的數據綁定，我正在使用ng-repeat呈現一組手風琴的簡單表單。每個手風琴的標題都有一個默認情況下爲紅色的狀態框，但當手風琴被展開時，選中內的複選框應該將狀態框變爲綠色。指定ng-repeat中的複選框的獨特模型和ID

我遇到的問題是，當我檢查一個複選框時，它將每個手風琴的狀態框變成綠色;不只是與複選框相關的狀態框。

我知道我需要爲每個狀態框/複選框分配一個獨特的模型，但我不確定如何。我已經看到了一些帶有$ 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>

來源

2016-12-26 K.DBTC

ng模型始終指向相同的東西。在ng-repeat的內部，我希望ng-model指向'animal'屬性，而不是'ctrl' – chiliNUT

謝謝你指點我正確的方向！ –

如果您不擔心增加額外的屬性，你animal對象，或者如果已經存在，將被用作複選框指示這些對象的屬性只需要使用：

ng-model="animal.SomeProperty"

的替代方法是使用單獨的對象並使用$index作爲每個鍵：

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

來源

2016-12-26 20:41:55 charlietfl

謝謝！這指出我正確的方向，我會超過我最終使用的東西！ –

指定ng-repeat中的複選框的獨特模型和ID

回答

相關問題