material-design-lite
material-design-lite copied to clipboard
mdl-textfield - class "is-upgraded" doesn't appear, if mdl-textfield locates in ng-repeat div.
trafficstars
Hello! I use IntelliJ IDEA with frameworks Thymeleaf, AngularJS, MDL v1.3.0.
This is my code in IntelliJ IDEA (main.html):
<div class="mdl-cell mdl-cell--4-col" ng-repeat="taskAction in userTask.taskActions">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="t1" class="mdl-textfield__input" type="text" ng-model="userTask.id">
<label class="mdl-textfield__label igor1c-floating-label" for="t1">{{taskActionParam.name}}</label>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="t2" class="mdl-textfield__input" type="text" ng-model="userTask.id">
<label class="mdl-textfield__label igor1c-floating-label" for="t2">{{taskActionParam.name}}</label>
</div>
</div>
When I focus the first div (in the div with the ng-repeat), animation doesn't appear. When I focus the second div, class "is-focused" adds to the div and animation appears.
This is HTML from the DevTools:
<!-- ngRepeat: taskAction in userTask.taskActions -->
<div class="mdl-cell mdl-cell--4-col ng-scope" ng-repeat="taskAction in userTask.taskActions">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="t1" class="mdl-textfield__input ng-pristine ng-valid ng-not-empty ng-touched" type="text" ng-model="userTask.id">
<label class="mdl-textfield__label igor1c-floating-label ng-binding" for="t1"></label>
</div>
</div>
<!-- end ngRepeat: taskAction in userTask.taskActions -->
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-upgraded" data-upgraded=",MaterialTextfield">
<input id="t2" class="mdl-textfield__input ng-pristine ng-valid ng-not-empty ng-touched" type="text" ng-model="userTask.id">
<label class="mdl-textfield__label igor1c-floating-label ng-binding" for="t2"></label>
</div>
</div>
Also I tried to add "data-upgraded" atribute to the first div (with ng-scope), but It doesn't help me.