CODEWITHSUNDEEP
javascripthtmlangularjscheckbox
Dirk
Dirk

Reputation: 2144

AngularJS Checkboxes not toggling

I am currently developing an application with AngularJS, and I have a list of items, with some checkboxes in it. In brief, it looks like this:

<li ng-repeat="a in b">
    <ul>
        <li ng-if="entry = 'someEntry'>
            ....
            <input type="checkbox" ng-model="myModel">
        </li>
     </ul>
</li>

The problem is that when I click the checkbox, it doesn't toggle. The model does toggle, and the checkbox also shows it's initial value. I've tested it on Chrome, Safari and Firefox, all on Mac OS X 10.9

My AngularJS version is 1.2.19

My entire code is:

<li ng-if="display == 'year' || display == 'month'">
    <ul ng-repeat="entry in data">
        <li ng-if="entry.type == 'WeekSeparator'">
            <div class="week-separator"><hr><span>Week {{entry.value}}</span></div>
        </li>

    <div ng-if="entry.type == 'Day'" class="entry-day">
        <li><a class="header">{{entry.value}}</a></li>

        <li ng-repeat="subEntry in entry.subEntries">
                <a>
                    <div class="width-92">
                        <select ng-model="schedule.entries[subEntry.id].hour">
                        <option value="0">Hele Dag</option>
                        <option value="1">1e Uur</option>
                        <option value="2">2e Uur</option>
                        <option value="3">3e Uur</option>
                        <option value="4">4e Uur</option>
                        <option value="5">5e Uur</option>
                        <option value="6">6e Uur</option>
                        <option value="7">7e Uur</option>
                        <option value="8">8e Uur</option>
                        <option value="9">9e Uur</option>
                    </select>
                </div>
                <div class="flex-1">
                    <input type="text" ng-model="schedule.entries[subEntry.id].description"  placeholder="Beschrijving">
                </div>
                <div class="width-64">
                    <input type="checkbox" ng-model="schedule.entries[subEntry.id].ond"> Ond.
                </div>
                <div class="width-64">
                    <input type="checkbox" ng-model="schedule.entries[subEntry.id].bov"> Bov.
                </div>
                <div class="width-64">
                    <input type="checkbox" ng-model="schedule.entries[subEntry.id].doc"> Doc.
                </div>
            </a>
        </li>
    </div>
</ul>
</li>

JSFiddle: http://jsfiddle.net/PR3Ww/

Upvotes: 1

Views: 757

Answers (3)

Kanchan Srivastava
Kanchan Srivastava

Reputation: 389

I think you are using older version of HTML and in that version inside is not allowed. HTML 4.01 specifies that elements may only contain inline elements. A is a block element, so it may not appear inside an .

Upvotes: 0

boindiil
boindiil

Reputation: 5865

Until now, I don't know why, but your <a> tag is destorying your scope within the inner ng-repeat.

Take a look at: JSFiddle

Upvotes: 1

Steve
Steve

Reputation: 19530

ng-repeat creates a childscope. The binding for the checkbox ng-model="myModel" will not update the $scope, it will update the child scope of ng-repeat. There's a good read about this topic here: https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat

As a rule of thumb always use a '.' in your models like 

    $scope.obj = { myModel :  true };

and in your HTML

    <input type="checkbox" ng-model="obj.myModel" />

Upvotes: 2

Related Questions