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

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