0

I am fairly new to ionic mobile app development. Currently I am working on android app development. My requirement is display a list, on click of any item on that list show a respective paragraph. For the same I have added the content in an array in services.js as directed in one of the example app in ionic app development. My query is I want to show the text content in different paragraphs on front end. Please help

Shruti
  • 721
  • 3
  • 13
  • 31
  • 1
    can you me codepen or some other link which code you tried – Paresh Gami Oct 01 '15 at 08:29
  • Code is incomplete so difficult to codepen.. I just want to show huge paragraphs on click of each item in list.. can you please guide for the same? – Shruti Oct 01 '15 at 13:17
  • suppose you have list of 5 items and each item have huge text right? and when i am click on item 1 it is display huge of clicked item right? – Paresh Gami Oct 01 '15 at 13:24
  • Yes exactly.. List may contain 5-6 words but when i click on each item huge text should come with paragraphs – Shruti Oct 01 '15 at 13:29
  • where you have to display? in bottom of page? – Paresh Gami Oct 01 '15 at 13:40
  • No in next page.. One page will contain a list of items like an index .. When u click on each item a new page will open with its respective description.. – Shruti Oct 01 '15 at 13:47
  • can you give me huge text sample text? – Paresh Gami Oct 01 '15 at 15:31
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/91113/discussion-between-shruti-and-paresh-gami). – Shruti Oct 01 '15 at 15:36

2 Answers2

0

use factory with conroller

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) 
{})

.controller('PlaylistsCtrl', function($scope,Chats) 
{
    $scope.chats = Chats.all();
})

.controller('PlaylistCtrl', function($scope, $stateParams,Chats) 
{ 
  $scope.chat = Chats.getOne($stateParams.id);
})

.factory('Chats', function() 
{ 
// Might use a resource here that returns a JSON array 
var chats = 
[{ 
      id: 0, 
      name: 'item1', 
      desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' 
      }, { 
      id: 1, 
      name: 'item2', 
      desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' 
      }, { 
      id: 2, 
      name: 'item3', 
      desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' 

      }, { 
      id: 3, 
      name: 'item4', 
      desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' 
      }, { 
      id: 4, 
      name: 'item5', 
      desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' 
}]; 

return { 
  all: function() 
  { 
    return chats; 
  }, 
  getOne:function(id)
  {
    return chats[id];
  } 
}; 
});
Paresh Gami
  • 4,777
  • 5
  • 23
  • 41
0

I have got the solution to this query. hope it helps to some else as well.. Solution is very simple and pure css -
Use \n where ever you need new line and in your html wrap your div with style="white-space:pre-wrap"; thats it!
Preserve line breaks in angularjs

Community
  • 1
  • 1
Shruti
  • 721
  • 3
  • 13
  • 31