MDL Checkbox weird behaviour with angular

Question

I'm using MDL and angular, i'm fetching some data from an API and then populate a tab containing a list with checkboxes.

The problem is that when i click the checkbox it doesn't check, i have to click twice to get the checkbox checked.

The HTML Markup is:

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

I have other tabs but there the content is not loaded dinamically and they are working properly.

Any idea of how could i solve the issue?

Note: I know that is much better to use Angular Material (Since it was designed to work properly with angular) however i have to use MDL because we have no time to remake the page using Angular Material

Community · Accepted Answer · 2017-05-23 11:50:33Z

0

I found the solution here AngularJS: ng-model inside ng-repeat?

It is very easy, just change ng-model="myFilter.companies['{{company.name}}']"

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

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Feb 23, 2016 at 22:06

Sebastian Hernandez

2,3764 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MDL Checkbox weird behaviour with angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related