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



  • 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

    0_1455726773272_Screenshot_2016-02-17-13-30-17_1.jpg


Log in to reply