Show paragraph text in an android app built on ionic - angularjs

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


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


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

Related

accordion not working using react bootstrap

I copy and paste the code from "https://react-bootstrap.github.io/components/accordion/" but it does not work ..
<Accordion>
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>
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.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body>
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.
</Accordion.Body>
</Accordion.Item>
</Accordion>

It looks like maybe the dependent CSS is not properly imported for react-bootstrap components?
According to react-bootstrap document, perhaps try add to App.js:
import 'bootstrap/dist/css/bootstrap.min.css';

React Native Bug: selectable doesn't work with justify text-alignment

I'm creating an reading aplication, but when I use at the same time textAlign: justify and selectable={true}, the justify alignment doesnt work. I'm testing on Android, version 10>+. Can someone help me?
<Text
selectable={true}
style={{textAlign: 'justify'}}
>
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.
</Text>

how to render a video from contentful in gatsbyjs

My video from contentful doesn't seem to be rendering properly. It's in the DOM but I can't get it to display. Any ideas why ?
I was thinking maybe it's an incorrect path and that's why it can't access it but the image works and displays just fine. There is also an eslint error message asking for a track element, could that be blocking it?
This is the code
{data.allContentfulPodcast.edges.map(video =>
<div>
<ReactPlayer
priority
autoPlay
loop
muted
className='react-player'
url={'https:' + video.node.video.file.url}
playing={isPlaying}
height = '100%'
width = '100%'
/>
</div>
)}
and the console.log
{
"allContentfulPodcast": {
"edges": [
{
"node": {
"title": "Welcome to our show",
"thumbnail": {
"file": {
"url": "//images.ctfassets.net/hi3b2mc578jm/3wxzzKv4Rblsv1FAUR2SQ/d8f09ade7e9fc57afa2f425bb2da9ed5/business.jpg"
}
},
"content": {
"raw": "{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"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.\\n\\nLorem 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.\\n\\nLorem 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.\\n\\n\",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"document\"}"
},
"video": {
"file": {
"url": "//assets.ctfassets.net/hi3b2mc578jm/4kK38bwyJRxPYoM3SADQrU/4b11d4079052f651685a407c7fc6ecb4/watch"
}
},
"audioClip": {
"file": {
"url": "//assets.ctfassets.net/hi3b2mc578jm/4QlnJBILMhACqeadWfr95S/7d70e3ff7d077cf463458edd93099432/mixkit-fast-rocket-whoosh-1714.wav"
}
}
}
}
]
}
}

To me, it seems that ReactPlayer is not able to find the video because it's stored locally, not in the domain you are telling the player (https://...).
Try deploying your site to get a valid URL or use a local path, using publicUrl or localUrl instead of video.file.url.
For the audio caption, you should use the file along with config props like:
<ReactPlayer
priority
autoPlay
loop
muted
className='react-player'
url={'https:' + video.node.video.file.url}
playing={isPlaying}
height = '100%'
width = '100%'
config={{ file: {
tracks: [
{kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true},
{kind: 'subtitles', src: 'subs/subtitles.ja.vtt', srcLang: 'ja'},
{kind: 'subtitles', src: 'subs/subtitles.de.vtt', srcLang: 'de'}
]
}}}
/>
There is also an eslint error message asking for a track element,
could that be blocking it?
Depends on your ESLint configuration. You can configure it to block or to throw an error in the compilation (error) or to warn you but allow the compilation to complete (warning). According to what you say, it seems the second option, otherwise, you wouldn't be able to compile the project.

AngularJS: After filter, detail screen still shows non-filtered index for Route Parameter

On AngularJS, I have a filter for a SKU and a Name. Those work great in filtering the correct information. However, when I want to load the information in the detail screen using routing to show more, it still loads the index 0, even though I'm selecting a different option. I'm not quite sure what's missing to get this to show the correct detail page.
Here is the HTML:
<input ng-model="search.name" placeholder="Enter search term here...">
<input ng-model="search.upc" placeholder="Enter SKU here...">
<li ng-repeat="product in productsArray | filter:search | filter:upc">
<button class="productListItem">{{product.name}}</button></li>
-------------------------`
Here is the JavaScript:
angular.module("ingredientProducts", ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/main',{
templateUrl: "main.html",
controller : "mainController"
}).when('/detail/:productID',{
templateUrl: "details.html",
controller : "detailsController"
}).otherwise({
redirectTo : "/main"
});
})
.controller("mainController", function($scope, dataService){
var productsArray = [];
$scope.productsArray = dataService.getProducts();
})
.controller("detailsController", function($scope, $routeParams, dataService){
$scope.product= dataService.getProductAt($routeParams.productID);
});
angular.module("ingredientProducts").service("dataService", function(){
var productsArray = [
{name: "Glass Container",
upc: "2000000000",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing 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.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
}];
this.getProducts = function(){
return productsArray;
};
this.getProductAt = function(product){
this.getProducts();
return productsArray[product];
};
});
Thank you for your help!

You can't rely on $index becouse when you filter your array index of product will be not equal to product index in your service.
Please see here for solution http://plnkr.co/edit/xFMkHxwDwkJfcqwnbHg8?p=preview
Main View:
<li ng-repeat="product in productsArray | filter:search | filter:upc">
<button class="productListItem">{{product.name}}</button></li>
Data Service:
angular.module("plunker").service("dataService", function(filterFilter) {
var productsArray = [{
name: "Glass Container",
upc: "2000000000",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing 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.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
},
{
name: "Jar",
upc: "2000000001",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing 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.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
},
{
name: "Tent",
upc: "2000000002",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing 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.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
},
{
name: "Bootle",
upc: "2000000003",
description: "This is a glass container",
ingredients: "Lorem ipsum dolor sit amet, consectetur adipisicing 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.",
allergy: "This product may contain soy, gluten, and dairy.",
img: "glass.jpg",
}];
this.getProducts = function() {
return productsArray;
};
this.getProductAt = function(_upc) {
this.getProducts();
return filterFilter(productsArray, {upc:_upc})[0];
};
});

How to make prettyphoto jquery lightbox responsive using Bootstrap v2.3.1

I have implemented lightbox in my responsive site using jquery prettyphoto lightbox and make my inline content to display inside lightbox.How to make the lightbox as responsive
<a href="#inline-1" rel="prettyPhoto" >Prettyphoto lightbox</a>
<div id="inline-1" class="hide">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p></div>

Resources