I have this code at below:
<div ng-repeat="person in Emotions" class="crop-item">
<div class="text-left">
<ul class="list-group no-buletts">
<li class="list-group-item" style="width: 300px;">
<img class="crop-img" alt="crop image" src="http://192.168.153.131:7000/tmp/{{Emotions['emotion-original-image-ref']}}.jpg.crop-{{$index}}.jpg"></img>
Top score: {{Emotions["emotion-top-scores"].$index}}
</li>
<li ng-repeat='(scoreTitle,scoreValue) in person.scores' class="list-group-item">
<div class="row">
<div class="col-md-6 text-left">
<label for="{{scoreTitle}}">{{scoreTitle}}: </label>
</div>
<div class="col-md-6 text-left">
{{scoreValue * 100 | number:2}} %
</div>
</div>
</li>
</ul>
</div>
</div>
I have this "Emotions" object that have this content:
{
"emotion-status-code": 200,
"emotion-response": [{
"faceRectangle": {
"height": 72,
"left": 147,
"top": 122,
"width": 72
},
"scores": {
"anger": 0.00165787316,
"contempt": 0.000218306363,
"disgust": 0.0000283911031,
"fear": 3.707502e-7,
"happiness": 1.67207048e-8,
"neutral": 0.948927,
"sadness": 0.04916397,
"surprise": 0.000004111683
}
}],
"emotion-original-image-ref": "e8c3a383-bba8-4015-a9de-a5bbc70843b2",
"emotion-top-scores": ["neutral"]
}
The problem is in the snippet right here:
Top score: {{Emotions["emotion-top-scores"].$index}}
I've checked the '$index' and it´s bringing the index as expected from 'ng-repeat' but I couldn't access the value and I don't know why. I believe I'm doing something silly. I tried to do this:
Top score: {{Emotions["emotion-top-scores"][$index]}}
Top score: {{Emotions["emotion-top-scores"][0]}}
And failing again.
Could you please help me in this "epic" situation, please?
Well, I made it! But appealing to an ugly XHG. I´ve created a 'ng-model' variable and wrote the content of response body directly on this variable through controller. Works but sucks! In the controller...
$scope.topScores = res["emotion-top-scores"];
In the HTML
<li class="list-group-item" style="width: 300px;" ng-model="topScores" >
Hope there is better solution. That really sucks! I´m really shamed!
Related
Ive been trying to make the angular carousel work, but iam currently stuck.
I am a newbie in angular, thus can i not get the ng-repeat too work correct.
what ive done:
<div id="slides_control">
<div>
<carousel interval="3000">
<slide ng-repeat="book in bookslider" active="book.active">
<div class="col-md-3"><img ng-src="{{book.img}}"></div>
<div class="col-md-3"><img ng-src="{{book[$index +1].img}}"></div>
<div class="col-md-3"><img ng-src="{{book[$index +2].img}}"></div>
<div class="col-md-3"><img ng-src="{{book[$index +3].img}}"></div>
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
</div>
$scope.bookslider = [
{
img: "images/headerslider/5.jpg"
},
{
img: "images/headerslider/4.jpg"
},
{
img: "images/headerslider/2.jpg"
},
{
img: "images/headerslider/3.jpg"
}
];
This display only the first image because it cannot "render" - book[$index +1].img how would one go about getting the next index item for this situation?
Working plunk: http://plnkr.co/edit/VcD8tKOtfQGuOgt4tO08
I gone through the plunker you provided and I under stand your requirement. I think the mistake that you made is where you loop the bookslider object. You need to loop through bookslider object instead of that you looped through the book object which is actually an individual object of the bookslider array.
You just change the carousel object like this to fix the issue.
<carousel interval="3000">
<slide ng-repeat="book in bookslider track by $index" active="book.active">
<div class="col-md-3"><img ng-src="{{bookslider[($index) %4 ].img}}" style="width=100px"></div>
<div class="col-md-3"><img ng-src="{{bookslider[($index+1) % 4].img}}"></div>
<div class="col-md-3"><img ng-src="{{bookslider[($index+2) % 4].img}}"></div>
<div class="col-md-3"><img ng-src="{{bookslider[($index+3) % 4].img}}"></div>
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
I have attached the working plunker here.
I have two array which is given below
$scope.base64Array=[null, null, "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQ…cmnAgj0PvTTgZJ5osK4w8dahc1MTnOMcnionwR2JNKwXP/9k=", null, null, null];
$scope.products=["Wheat", "LCD Monitor", "Ethernet Cable", "Optical Mouse", "Rice", "Mac Mini RAM 4 GB"];
Here I have an null value in base64array if it is null then no need to display image and if i have base64 string i need to display in that image row
and my ionic view looks like
<ul class="list">
<li class="item" ng-repeat="i in products" ui-sref="leadProduct" >
{{i}}
<br>
<img ng-show="imgURI === undefined" ng-src="http://placehold.it/100x100">
</li>
</ul>
You can add a track by $index to the repeat so you can tell which index you are at then index into base64Array.
<ul class="list">
<li class="item" ng-repeat="i in products track by $index" ui-sref="leadProduct" >
{{i}}
<br>
<img ng-show="base64Array[$index] != undefined" ng-src="{{'data:image/png;base64,'+base64Array[$index]}}">
<img ng-show="base64Array[$index] == undefined" src="http://placehold.it/100x100">
</li>
</ul>
Try process this two arrays before assignment, loop the base64Array, remove the null item and the same index item in products.
var tmp_base64Array = ["/9j/4AAQSkZJRgABAQAAAQABAAD..."];
var tmp_products = ["Ethernet Cable"];
After process the two arrays would be like this, then assignment to $scope.
edit:
$scope.products = [
{ "name": "Wheat", "imgUrl": null },
{ "name": "LCD Monitor", "imgUrl": "/9j/4AAQSkZJRgABA..." }
];
<ul class="list">
<li class="item" ng-repeat="product in products" ui-sref="leadProduct" >
{{product.name}}
<img ng-src="{{product.imgUrl || 'http://placehold.it/100x100'}}">
</li>
</ul>
I need help to use ng-model directive with ui-gmap-marker. My example app.js is:
// DevicesController
$scope.devices = {
id: 1,
center: { latitude: X, longitude Y },
options: {
show: true,
name: 'device 1',
radius: 100
}
(...)
}
My index.html is:
<ul ng-controller="DevicesController">
<li ng-repeat="d in devices">
<input type="checkbox" ng-model="d.options.show">
<span>{{ d.options.name }}</span>
</li>
</ul>
(...)
<div id="map_canvas" ng-controller="DevicesController">
<ui-gmap-marker
ng-repeat="d in devicesMarkers track by d.id"
idkey="d.id"
coords="d.center"
ng-model="d.options.show">
</ui-gmap-marker>
(...)
How can I use ng-model? Doesn't work because I'm using the same controller e two different places? I want that the user be able to click in input checkbox and the marker appear/disappear.
I'd suggest simply wrap both the div in same controller rather than providing a separate controller to them.
Markup
<div ng-controller="DevicesController">
<ul>
<li ng-repeat="d in devices">
<input type="checkbox" ng-model="d.options.show">
<span>{{ d.options.name }}</span>
</li>
</ul>
(...)
<div id="map_canvas">
<ui-gmap-marker
ng-repeat="d in devicesMarkers track by d.id"
idkey="d.id"
coords="d.center"
ng-model="d.options.show">
</ui-gmap-marker>
</div>
(...)
</div>
Else maintain the data in share able service that will provide the data to both controller and will make sure, data should be updated in both places.
everyone, I've a scenario like this...
$scope.flags = {
'porIdade': {
'text': 'Por idade',
'flags': {
'meses1a3': '1 a 3 meses',
'meses4a7': '4 a 7 meses',
'meses8a12': '8 a 12 meses'
}
},
'sexo': {
'text': 'Sexo',
'flags': {
'menino': 'Menino',
'menina': 'Menina'
}
},
'estacao': {
'text': 'Coleção',
'flags': {
'menino': 'Inverno',
'menina': 'Verão'
}
}
}
Basically I need to put, for example: porIdade.text into the panel-heading into a DIV
and populate the children inside the UL. I don't know how to use ng-repeat for this. This is the html.
<div class="panel panel-default" id="leftColumn">
<div class="panel-heading">PARENT</div>
<ul class="list-group">
<li class="list-group-item">Child1</li>
<li class="list-group-item">Child1</li>
<li class="list-group-item">Child1</li>
<li class="list-group-item">Child1</li>
</ul>
</div>
so, if I set something like this:
PARENT
this will create 3 rows with panel-heading. So, to solve this I need something like...
<ng-repeat start here (key,val) in flags>
<div class="panel panel-default" id="leftColumn">
<div class="panel-heading">PARENT</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat children>{{child.text}}</li>
</ul>
</div>
</ng-repeat finish here>
ANy suggestions ? I can't use a DIV before the panel :( so, this suggestions is not valid. It's causes a weird behaviour with the bootstrap.
You need to use a nested ng-repeat like this: (I've removed classes to keep the concept more readable)
<div ng-repeat="data in flags">
<div ng-bind="data.text"></div>
<ul>
<li ng-repeat="item in data.flags" ng-bind="item"></li>
</ul>
</div>
I'm using the angular ui bootstrap carousel and I want to make the indicators thumbnails. I have a controller that looks like this (from the demo):
function carouselCtrl($scope) {
$scope.myInterval = 5000;
$scope.imgPath="img/slideshow/"
var slides = $scope.slides = [{
'imgName':'iguanas.jpg',
'caption':'Marine iguanas in the Galapagos National Park on Santa Cruz Island, on September 15, 2008.',
'author':'(Reuters/Guillermo Granja)'
},{
'imgName':'eruption.jpg',
'caption':'In June of 2009, the Cerro Azul volcano on Isabela Island was in an active phase, spewing molten lava into the air, spilling it across its flanks, and widening existing lava flows.',
'author':'(Reuters/Parque Nacional Galapagos)'
},{
'imgName':'bluefoot.jpg',
'caption':'A close-up of a pair of Booby feet, photographed in March of 2008. ',
'author':'(CC BY Michael McCullough)'
}];
}
and the template looks like this:
<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">
<ul class="carousel-indicators" ng-show="slides().length > 1">
<li ng-repeat="slide in slides()" class="slide-thumb" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
</ul>
<div class="carousel-inner" ng-transclude></div>
<a ng-click="prev()" class="carousel-control left" ng-show="slides().length > 1">‹</a>
<a ng-click="next()" class="carousel-control right" ng-show="slides().length > 1">›</a>
</div>
I want to do something like this:
<li ng-repeat="slide in slides()" class="slide-thumb" ng-class="{active: isActive(slide)}" ng-click="select(slide)" style="background-image:url({{slide.imgName}});"></li>
but I must be out of scope or something... Does anyone know any angular carousels that have a thumbnail option or how I can get this to work?
The slide array in the carousel template actually don't refer to the slides array you have defined in your app controller.
In the carousel template slides refer to a bunch of dom elements enhanced with internal properties. That's why any access to properties you have defined in our objects will failed when executed (scope issue as you guessed already).
If you want to stick to the carousel from angular-ui I would recommend a slightly different approach and go for css styling something like that:
//Default styles for indicator elements
.carousel-indicators li {
background-size : 42px 22px;
width : 42px;
height: 22px;
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
}
// Then Specify a background image for every slide
.carousel-indicators li:nth-child(1){
background-image: url(http://cache.wallpaperdownloader.com/bing/img/WeddedRocks_20100418.jpg);
}
...
You can see a working Plunker here.
It's very possible and it's very simple. First you must pass the model of every slide in the actual directive as indicated in the docs for the uib-slide settings. And then you must override the template using the template-url directive. Don't forget to declare the template.
So the html should look like this:
<!--Defining the controller scope-->
<div ng-controller="carousel">
<!--Declaring the template for later usage-->
<script id="carousel-with-thumbs.html" type="text/ng-template">
<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()"
ng-swipe-left="next()">
<div class="carousel-inner" ng-transclude></div>
<a role="button" href class="left carousel-control" ng-click="prev()"
ng-class="{ disabled: isPrevDisabled() }"
ng-show="slides.length > 1">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">previous</span>
</a>
<a role="button" href class="right carousel-control" ng-click="next()"
ng-class="{ disabled: isNextDisabled() }"
ng-show="slides.length > 1">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">next</span>
</a>
<ol class="carousel-indicators" ng-show="slides.length > 1">
<li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index"
ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
<!--Showing the thumbnail in a <img> tag -->
<img ng-src="{{slide.slide.actual.thumb}}">
<span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
</li>
</ol>
</div>
</div>
</script>
<uib-carousel active="active" interval="interval" template-url="carousel-with-thumbs.html">
<uib-slide ng-repeat="slide in slides track by $index" index="$index" actual="slide">
<!--Passing the slide in the actual directive-->
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>{{slide.title}}</h4>
<p>{{slide.text}}</p>
</div>
</uib-slide>
</uib-carousel>
Take a moment to analyse the carousel-indicators ordered list:
<ol class="carousel-indicators" ng-show="slides.length > 1">
<li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }"
ng-click="select(slide)">
<img ng-src="{{slide.slide.actual.thumb}}">
<span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
</li>
</ol>
Look how each slide model has another slide sub-model which is the transcluded scope of the slide model passed
through the actual directive. And then, nested again, the actual model containing all the data of each slide:
<img ng-src="{{slide.slide.actual.thumb}}">
And of course for the big finale, the controller should look like this:
(function(){
'use strict';
angular
.module('app', ['ui.bootstrap'])
.controller('carousel', carousel);
carousel.$inject = ['$scope'];
function carousel($scope){
$scope.active = 0;
$scope.interval = 5000;
$scope.slides = [
{title: "Any title", text: "This is a text for the slide", image: "path/to/the/image/image.jpg", thumb: "path/to/the/image/thumbs/thumb.jpg"},
{title: "Any title", text: "This is a text for the slide", image: "path/to/the/image/image.jpg", thumb: "path/to/the/image/thumbs/thumb.jpg"},
{title: "Any title", text: "This is a text for the slide", image: "path/to/the/image/image.jpg", thumb: "path/to/the/image/thumbs/thumb.jpg"}
];
}
})();
By the way, I'm using Angular UI Boostrap 1.3.3 along with Angular 1.5.8.
Here's the Fiddle for it https://jsfiddle.net/logus/6mvjpf40/