Set a specific picture to each element of Onsen UI Master-Details

Leonardo Augusto

Just a tip . Nothing hard , but It was very helpfull for me some months ago. And i believe it can help you if you’re newbie like me.
If you are using Onsen UI Master-Details and needs to set a specific picture to each element.

module.factory('$data', function() {
  var data = {};

  data.items = [
      {
          title: 'Item 1 Title',
          label: '4h',
          desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
      },
      {
          title: 'Another Item Title',
          label: '6h',
          desc: 'Ut enim ad minim veniam.'
      },
      {
          title: 'Yet Another Item Title',
          label: '1day ago',
          desc: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
      },
      {
          title: 'Yet Another Item Title',
          label: '2 days ago',
          desc: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
      }
  ];

  return data;
});

the solution: ( add an image element)

data.items = [
      {
          Image: 'onsenpicone.jpg',
          title: 'Item 1 Title',
          label: '4h',
          desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
      },

And

<div ><img class="item-thum" ng-src="images/{{item.Image}}" style="margin:auto;"></div>

The result

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Set a specific picture to each element of Onsen UI Master-Details