Search code examples
checkboxangularjs-ng-repeationic-framework

Ionic: Checkboxes loaded in ng-repeat doesn't work very well


I'm trying to generate a list with these objects :

$scope.note.contentList = [{text: "hello", checked: false},{text: "hello 2", checked: false},...]

My view:

<label class="item item-input item-stacked-label" ng-hide="displayContentType()">

            <span class="input-label"><b>Content</b></span>

            <div class="row" ng-repeat="listItem in note.contentList">
                <div class="col"><ion-checkbox ng-model="listItem.checked"  ></ion-checkbox></div>
                <div class="col col-80"><input type="text" ng-model="listItem.text"></input></div>
            </div>

            <div class="row" ng-click="addElementToContentList()">
                <div class="col col-20"><i class="icon ion-plus-round" >Add Element</i></div>
            </div>

</label>

The problem is when I try to click somewhere on this view. The first checkbox of the list, always changes its value.

For example, even when I click on the link "add element", the ng-click event doesn't work and the first checkbox is "checked".

Any idea? Thanks.


Solution

  • Just switch <label class="item... >..</label> by <div class="item...>..</div>. It Works better.