AngularJS复选框不切换

Question

我目前正在使用 AngularJS 开发一个应用程序，并且我有一个项目列表，其中包含一些复选框。简而言之，它看起来像这样：

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

问题是当我单击复选框时，它不会切换。模型确实切换，复选框也显示它的初始值。我已经在 Chrome、Safari 和 Firefox 上测试过了，都在 Mac OS X 10.9 上

我的 AngularJS 版本是 1.2.19

我的整个代码是：

<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/

Answer 1

ng-repeat 创建一个子作用域。复选框 ng-model="myModel" 的绑定不会更新 $scope，它会更新 ng-repeat 的子范围。这里有关于这个主题的很好的阅读：https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat

根据经验，请始终使用“。”在您的模型中，例如

    $scope.obj = { myModel :  true };

在你的 HTML 中

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

Answer 2

直到现在，我不知道为什么，但是您的 <a> 标签正在破坏您在内部 ng-repeat 中的范围。

看看：JSFiddle

Answer 3

我认为您使用的是旧版本的 HTML，并且在该版本中是不允许的。 HTML 4.01 规定元素只能包含内联元素。 A 是一个块元素，所以它可能不会出现在 .