0

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

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

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

2 件の回答 2

0

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>

1
  • cither 様 記載して頂いたサンプルで実現できました。ありがとうございました。
    – ash
    Commented 2016年3月28日 0:35
0

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

<ons-list-item class="hoge">

のようにしておいて、

$('.hoge').attr('modifier', 'chevron');

で出来ると思います。

4
  • 「属性の書き換えはできるが、それに伴って変わるはずの見た目が変わらないのはなぜか」というのが質問の意図のようです。
    – cither
    Commented 2016年3月27日 3:10
  • cob 様 ご回答ありがとうございます。 質問の内容は、cither 様のコメントされている内容になります。 わかりにくくてすみませんでした。
    – ash
    Commented 2016年3月28日 0:23
  • 大変失礼しました。Onsenの1系だと動的書き換えのあとにons.compile(ターゲット);が必要ですね。それで見た目が変わってクリックしたときの動作もするようになるはずです。
    – cob
    Commented 2016年3月28日 2:57
  • cob 様 var a = $('#ons-list-item'); ons.compile(a[0]); でも、動作確認できました。貴重な情報ありがとうございました。
    – ash
    Commented 2016年3月30日 2:23

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。