Question

我正在使用MDL和angular，我从API中获取一些数据，然后填充包含带复选框的列表的选项卡。

问题是当我点击复选框时它没有检查，我必须点击两次才能选中复选框。

HTML标记是：

<div class="mdl-tabs__panel" id="tab4">
    <div class="options-container">
        <div ng-repeat="company in busCompanies" class="option-item">
            <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="companies-checkbox-{{$index}}">
                <i class="material-icons">star</i>
                <span class="star-rating">4.8</span>
                <span class="mdl-checkbox__label">{{company.name}}</span>
                <input type="checkbox" ng-model="myFilter.companies['{{company.name}}']" id="companies-checkbox-{{$index}}" class="mdl-checkbox__input">
            </label>
        </div>
    </div>
</div>

我有其他标签，但内容没有加载，并且它们正常工作。

我怎么能解决这个问题？

注意：我知道使用Angular Material要好得多（因为它设计为使用角度正常工作）但是我必须使用MDL，因为我们没有时间使用Angular重新制作页面材料

Answer 1

我在这里找到了解决方案AngularJS: ng-model inside ng-repeat?

这很容易，只是改变 ng-model="myFilter.companies['{{company.name}}']"

代表ng-model="myFilter.companies[company.name]"

MDL Checkbox奇怪的角度行为

1 个答案: