在基于ionic的android应用中显示段落文本

Question

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

Answer 1

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];
  } 
}; 
});

Answer 2

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