Monacaのonsen uiを使用しています。
ons-list-itemタグのmodifierの内容を動的に変更したいのですが、可能なのでしょうか?
pageinitで、$('#ons-list-item').attr('modifier', 'chevron')をしても、console.log上は変更されていますが、画面は">"マークが出てこなく、クリックしても反応しません。
どなたかご存知の方いましたら、ご教示ください。
OnsenUIは(少なくとも1系は)modifierの動的な変更に対応していませんのでmodifier属性を書き換えるだけでは機能しません。代わりに<ons-list-item>
のclassを手動で付加/除去することで実現できます。下記のスニペットを実行してみてください。
ons.bootstrap()
.controller('appCtrl', function($scope, $timeout, $element){
setInterval(function(){
$element.find('ons-list-item').toggleClass('list__item--chevron');
$element.find('ons-list-item').toggleClass('list__item--tappable');
}, 1000);
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.15/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.15/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.15/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.15/build/js/onsenui.min.js"></script>
<ons-page ng-controller="appCtrl">
<ons-list>
<ons-list-header></ons-list-header>
<ons-list-item>item1</ons-list-item>
<ons-list-item>item2</ons-list-item>
<ons-list-item>item3</ons-list-item>
<ons-list-item>itme4</ons-list-item>
<ons-list-item>item5</ons-list-item>
</ons-list>
</ons-page>
jQueryのattr('modifier', 'chevron')で追加できますよ。
他のコードに誤りはありませんか?
$('#ons-list-item')とありますが、#はIDを指定するセレクタなので、ここが間違っているのではないでしょうか。
<ons-list-item class="hoge">
のようにしておいて、
$('.hoge').attr('modifier', 'chevron');
で出来ると思います。