Question

我有一个复选框，单击该复选框可将值及其标题保存在本地存储中。这个复选框位于div内。我希望在单击div中的任何位置时更改复选框值，但我无法弄清楚如何执行此操作。到目前为止，这是我的代码。

<div class="grid-menu">
    <div class="centering-and-alignment" ng-repeat="row in items | partition:3">

        <div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row">
            <label class="checkbox">
                <input type="checkbox" ng-model="item.value" name="item.title" ng-change="SaveCategories()">

                <div class="checkbox__checkmark"></div>
            </label>
            <ons-icon icon="{{item.icon}}"></ons-icon>
            <div class="grid-menu-item-label">{{item.title}}</div>
        </div>

    </div>
</div>

我尝试过更改

<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" >

到

<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" ng-click="item.value = !item.value" >

它可以工作但是它不会将值保存到本地存储，因此当我再次打开页面时，所有内容都将被取消选中。

我查看了其他类似的问题，但它们并不涉及本地存储。

Answer 1

最简单的方法是使用其他标签。为此，您可以稍微修改标记：

<div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row">
    <label class="checkbox">
        <input type="checkbox" id="check-{{$index}}" ng-model="item.value" name="item.title" ng-change="SaveCategories();">
        <div class="checkbox__checkmark">{{item.value}}</div>
    </label>
    <label for="check-{{$index}}">
        <ons-icon icon="{{item.icon}}"></ons-icon>
    </label>
    <div class="grid-menu-item-label">
        <label for="check-{{$index}}">{{item.title}}</label>
    </div>
</div>

单击div时更改复选框值

1 个答案: