23497


Monacaのonsen uiを使用しています。  
ons-list-itemタグのmodifierの内容を動的に変更したいのですが、可能なのでしょうか？

pageinitで、$('#ons-list-item').attr('modifier',
'chevron')をしても、console.log上は変更されていますが、画面は">"マークが出てこなく、クリックしても反応しません。

どなたかご存知の方いましたら、ご教示ください。


CC BY-SA 3.0
2016-03-25T02:16:38.093
23439
2016-03-27T03:02:34.637
14931
question
monaca onsen-ui
onsen uiのons-list-itemタグのmodifierに関して


jQueryのattr('modifier', 'chevron')で追加できますよ。  
他のコードに誤りはありませんか？  
$('#ons-list-item')とありますが、#はIDを指定するセレクタなので、ここが間違っているのではないでしょうか。

[code]

    <ons-list-item class="hoge">
    
[/code]

のようにしておいて、

[code]

    $('.hoge').attr('modifier', 'chevron');
    
[/code]

で出来ると思います。


CC BY-SA 3.0
2016-03-25T10:34:10.800
23457
2016-03-25T10:34:10.800
14940
23439
answer


OnsenUIは（少なくとも1系は）modifierの動的な変更に対応していませんのでmodifier属性を書き換えるだけでは機能しません。代わりに`<ons-
list-item>`のclassを手動で付加/除去することで実現できます。下記のスニペットを実行してみてください。

[code]

    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);
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2016-03-27T03:02:34.637
23497
2016-03-27T03:02:34.637
8532
23439
answer