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创建一个childscope。复选框ng-model =＆＃34; myModel＆＃34;的绑定不会更新$ scope，它会更新ng-repeat的子范围。这里有关于此主题的很好的解读：https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat

根据经验，一直使用＆＃39;。＆＃39;在您的模型中

    $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是一个块元素，因此它可能不会出现在。

中

AngularJS复选框无法切换

3 个答案: