單擊div時更改復選框的值

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>