I'm currently having a problem with ng-repeat and limiting the amount of elements being displayed in my view. I'm wondering if it has to do with being a nested loop. Here is the code:
<li style="cursor:pointer; margin:8px;" class="span3" ng-repeat="psp in preSplitPrompts" ng-click="selectRelatedSplitPanels($index)">
<div ng-class="$first ? 'panelBackground' : 'altPanelBackground'" class="thumbnail splitPanel">
<h3>{{ (psp.promptname) ? psp.promptname : "No Name From API" }}</h3>
<hr>
<h2 ng-repeat="postsplit in psp.postSplit | limitTo: 1">{{ postsplit.metrics.preSplitTotalCount ? postsplit.metrics.preSplitTotalCount : 0 }}</h2>
<p>Visits</p>
</div>
</li>
I've tried limiting the list item by doing limitTo:1 and that works fine. It's only when trying to limit the postsplit. Thanks for the help.
EDIT:
This code works:
<li style="cursor:pointer; margin:8px;" class="span3" ng-repeat="psp in preSplitPrompts | limitTo: 1" ng-click="selectRelatedSplitPanels($index)">
<div ng-class="$first ? 'panelBackground' : 'altPanelBackground'" class="thumbnail splitPanel">
<h3>{{ (psp.promptname) ? psp.promptname : "No Name From API" }}</h3>
<hr>
<h2 ng-repeat="postsplit in psp.postSplit">{{ postsplit.metrics.preSplitTotalCount ? postsplit.metrics.preSplitTotalCount : 0 }}</h2>
<p>Visits</p>
</div>
</li>
Here is the data object:
Try this:
ng-class="{$first ? 'panelBackground' : 'altPanelBackground'}"
Related
I want to create grid list using two components. Parent and child. But it doesn't show anything.
parent(app-messages):
<mat-grid-list cols="2">
<app-message-item
*ngFor="let message of messages"
[message]="message"
(deleteMessage)="deleteMessage(message._id)"
(openUpdateDialog)="openUpdateDialog(message._id)"
>
</app-message-item>
</mat-grid-list>
child(app-message-item):
<mat-grid-tile>
<p>
{{ message.created_at | date:'medium' }}
</p>
<div [innerHTML]="message.content"></div>
<img [src]="message.fileImage ? environment+message.path : message.path" height="100">
<button (click)="onDelete(message._id)" class="del">x</button>
<button (click)="onUpdate(message._id)" class="del">Modify</button>
</mat-grid-tile>
I am creating app in ionic /angularjs.
The controller fetches the data in JSON format from the URL and displays unique images in div elements. I want to allow these images to be clicked and then display the data according to offer_name, which is coming from the JSON data.
e.g.: Suppose I display the image for Amazon (in background offer_name is amazon (having 10 records)). When the user clicks on that, it displays all the records related to amazon.
Hope you get my point but no database is included; it only works with JSON data.
Also, how can the check current value be checked in ng-repeat?
Here is my code:
.controller('menuCtrl', function($scope,$http) {
$http.get("http://tools.vcommission.com/api/coupons.php?apikey=e159f64e3dd49fddc3bb21dcda70f10c6670ea91aac30c7cb1d4ed37b20c45b8").then(function (response) {
$scope.myData = response.data;
/* $scope.stack=[];
angular.forEach($scope.myData, function(item){
$scope.stack =item.store_image;
var uni_img=[];
for(var i=0 ; i< $scope.stack.length;i++)
{
if(uni_img.indexOf($scope.stack[i] == -1))
uni_img.push($scope.stack[i]);
}
console.log(uni_img);
})*/
});
$scope.dealopen = function($a){
for (var i=0;i<$scope.myData.length;i++)
{
//console.log($scope.data[i].name);
$link=$scope.data[i].offer_name;
if ($link==$a)
{
$window.open($link,"_self","location=yes");
console.log($a);
}
}
}
})
Html
<div class="item col-sm-2 col-sm-3 col-md-2 " ng-repeat="da in myData | unique: 'store_image'" >
<div class="thumbnail">
<img class="thumbnail img-responsive " ng-src="{{ da.store_image}}"
/>
<div class="caption">
<b class="group inner list-group-item-heading center-block">
{{da.offer_name | limitTo: 12 }} Deals</b>
<a class="item item-text-wrap" ng-href="#/Deals/{{da.offer_name}}">View Deal</a>
</div>
</div>
</div>
Here is the output:
.
One way to achieve this is to use ng-click to execute javascript (e.g. inline or call a function in the controller scope. Per the documentation for ngRepeat $index can be referenced for the current index:
Special properties are exposed on the local scope of each template instance, including:
+----------+---------+-----------------------------------------------------------------------------+
| Variable | Type | Details |
+----------+---------+-----------------------------------------------------------------------------+
| $index | number | iterator offset of the repeated element (0..length-1) |
| $first | boolean | true if the repeated element is first in the iterator. |
| $middle | boolean | true if the repeated element is between the first and last in the iterator. |
| $last | boolean | true if the repeated element is last in the iterator. |
| $even | boolean | true if the iterator position $index is even (otherwise false). |
| $odd | boolean | true if the iterator position $index is odd (otherwise false). |
+----------+---------+-----------------------------------------------------------------------------+
1
So the image tag can have the attribute ng-click to utilize that directive, like this:
<img class="thumbnail img-responsive " ng-src="{{ da.store_image}}" ng-click="showData(da.offer_name, $index)"/>
Then use Array.filter() to filter all offers into a filtered array of offers matching the offer_name:
$scope.showData = function (offer_name, index) {
$scope.offerName = da.offer_name;
$scope.filteredOffers = $scope.myData.filter(function(offer) {
return offer.offer_name == $scope.offerName;
});
}
And then add another set of elements to display the items in filteredOffers.
<div ng-repeat="offer in filteredOffers">
<div class="couponCode">{{offer.coupon_code}}</div>
<div class="couponTitle">{{offer.coupon_title}}</div>
<div class="couponDescription">{{offer.coupon_Description}}</div>
</div>
See the example below where the showData function updates the model selectedIndex, offerName and filteredOffers using these components.
angular.module('myApp', ['ui'])
.controller('menuCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.offerName = ''; //set initially
$scope.selectedIndex = -1;
$scope.filteredOffers = [];
$http.get("http://tools.vcommission.com/api/coupons.php?apikey=e159f64e3dd49fddc3bb21dcda70f10c6670ea91aac30c7cb1d4ed37b20c45b8").then(function(response) {
$scope.myData = response.data;
});
$scope.showData = function(offer_name, index) {
$scope.offerName = offer_name;
$scope.filteredOffers = $scope.myData.filter(function(offer) {
return offer.offer_name == $scope.offerName;
});
$scope.selectedIndex = index;
}
}
]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5" data-require="angular.js#*" context="anonymous"></script>
<script data-require="angular-ui#*" data-semver="0.4.0" src="//rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js" context="anonymous"></script>
<div ng-app="myApp" ng-controller="menuCtrl">
<div>
OfferName:
<span ng-bind="offerName"></span>
</div>
<div>
selected index:
<span ng-bind="selectedIndex"></span>
</div>
<div class="item col-sm-2 col-sm-3 col-md-2 " ng-repeat="da in myData | unique: 'store_image'">
<div class="thumbnail">
<img class="thumbnail img-responsive " ng-src="{{ da.store_image}}" ng-click="showData(da.offer_name, $index)" />
<div class="caption">
<b class="group inner list-group-item-heading center-block">
{{da.offer_name | limitTo: 12 }} Deals</b>
<a class="item item-text-wrap" ng-href="#/Deals/{{da.offer_name}}">View Deal</a>
</div>
</div>
</div>
<div ng-repeat="offer in filteredOffers">
<div class="couponCode">{{offer.coupon_code}}</div>
<div class="couponTitle">{{offer.coupon_title}}</div>
<div class="couponDescription">{{offer.coupon_Description}}</div>
</div>
</div>
1 https://docs.angularjs.org/api/ng/directive/ngRepeat
You can use $index, that is the variable used in agular to know the index position in ng-repeat, if you want to know more about another contro variables of ng-repeat read the docs in the next link https://docs.angularjs.org/api/ng/directive/ngRepeat
An basic example is.
CONTROLLER
app.controller('menuCtrl', function($scope,$http) {
$scope.myData = [{path:'http://www.imagefree1.com',info:'http://www.infoimage1.com'},
{path:'http://www.imagefree2.com',info:'http://www.infoimage2.com'},
{path:'http://www.imagefree3.com',info:'http://www.infoimage3.com'}];
$scope.callDetail=function(index)
window.open(myData[index].info);
})
HTML
<div ng-repeat="image in myData">
<a href="#" ng-click="callDetail($index)">
<img src="image.path" alt="Description"/>
</a>
</div>
At first look you never call the $scope.dealopen function,
may be this can work....
<div class="item col-sm-2 col-sm-3 col-md-2 " ng-repeat="da in myData | unique: 'store_image'" >
<div class="thumbnail">
<img class="thumbnail img-responsive " ng-src="{{ da.store_image}}"/>
<div class="caption">
<b class="group inner list-group-item-heading center-block">{{da.offer_name | limitTo: 12 }} Deals</b>
<a class="item item-text-wrap" ng-click="dealopen(da.offer_name)">View Deal</a>
</div>
</div>
</div>
I am creating dynamic tabs using ajax data loaded via the WordPress REST-API. Everything is working, but I need to add a class to the active tab in order to use CSS transforms on it.
I would appreciate any suggestions. I know how to use ng-class when clicking one element affects another, but not when it affects the clicked element. It's also worth noting I am using the 'as' syntax for the ng-controller.
JAVASCRIPT:
var homeApp = angular.module('homeCharacters', ['ngSanitize']);
homeApp.controller('characters', function($scope, $http) {
$scope.myData = {
tab: 0
}; //set default tab
$http.get("http://bigbluecomics.dev/wp-json/posts?type=character").then(function(response) {
$scope.myData.data = response.data;
});
});
homeApp.filter('toTrusted', ['$sce',
function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}
]);
HTML:
<div class="more_comics_mobile">More Comics <img src="./images/white-arrow.png" />
</div>
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
{{ item.content }}
</div>
<div class="char_tabs">
<nav>
<ul ng-init="myData.tab = 0" ng-model='clicked'>
<li class="tab" ng-repeat="item in myData.data">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<h3>{{ item.title }}</h3>
</a>
</li>
</ul>
</nav>
</div>
</section>
I am trying to add the class to the li element. I appreciate any help!
You can use ng-class like
<li class="tab" ng-repeat="item in myData.data" ng-class="{'active' : item.menu_order == myData.tab}"></li>
For more options you can visit
https://docs.angularjs.org/api/ng/directive/ngClass
<div class="more_comics_mobile">More Comics <img src="./images/white-arrow.png" />
</div>
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
{{ item.content }}
</div>
<div class="char_tabs">
<nav>
<ul ng-init="myData.tab = 0" ng-model='clicked'>
<li class="tab" ng-click="activate($index)" ng-repeat="item in myData.data">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<h3>{{ item.title }}</h3>
</a>
</li>
</ul>
</nav>
</div>
</section>
in your js
$scope.activate = function(index){
document.getElementsByClassName.setAttribute("class","tab");
document.getElementsByClassName[index].setAttribute("class","tab active");
}
I've a little issue : In my HomePage, I've an NG-repeat with image in post. When I want click in one post, I have this error :
TypeError: Cannot read property 'facebook' of undefined
at new <anonymous> (app.js:234)
at invoke (ionic.bundle.js:12877)
at Object.instantiate (ionic.bundle.js:12885)
at ionic.bundle.js:17154
at IonicModule.controller.self.appendViewElement (ionic.bundle.js:48176)
at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.render (ionic.bundle.js:46392)
at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.init (ionic.bundle.js:46312)
at IonicModule.controller.self.render (ionic.bundle.js:48050)
at IonicModule.controller.self.register (ionic.bundle.js:48008)
at updateView (ionic.bundle.js:53315)
AND
GET http://127.0.0.1:8103/%7B%7BauthData.facebook.cachedUserProfile.picture.data.url%7D%7D 404 (Not Found)
This is my HTML :
<div ng-repeat="(id,post) in posts">
<div class="card" ui-sref="tabpost({ postname: post.nameid, postdescription: post.descriptionid, postdate: post.startdateid, posthour: post.starthourid, postprice: post.priceid, postnbguest: post.nbguestid, postpicture: post.pictureid })">
<div class="item item-divider" ng-class="{{post.starthourid | setImageClass}}">
<h2 class="text stable"> {{ post.nameid }} </h2>
<h3 class="text stable" id="header-date">
<i class="icon ion-clock"></i> Le {{ post.startdateid | date : "d MMM" }} à {{ post.starthourid | date : "HH:mm" }}</p>
</div>
<div class="row">
<div class="col">
<h3><i class="icon ion-ios-location"></i> À 500m</h3></div>
<div class="col"><h3><i class="icon ion-ios-people">
</i> 2/{{ post.nbguestid }} </h3></div>
</div>
<button class="button button-stable" id="positive-btn-price" disabled>{{ post.priceid }}€</button>
<img class="imgProfilPostPositive" src="{{ post.userid.facebook.cachedUserProfile.picture.data.url }}">
<div class="item item-divider" id="footerPostNotepositive"><p> <i class="fa fa-star"></i> Popular </p> </div>
</div>
</div>
</div></div>
App JS :
.state('tabpost', {
url: '/tabpost/:postname/:postdescription/:postdate/:posthour/:postprice/:postnbguest/:postpicture',
templateUrl: 'templates/tab-post.html',
controller: 'PostCtrl',
})
Controller JS :
$scope.nameid = $stateParams.postname;
$scope.descriptionid = $stateParams.postdescription;
$scope.startdateid = $stateParams.postdate;
$scope.starthourid = $stateParams.posthour;
$scope.priceid = $stateParams.postprice;
$scope.nbguestid = $stateParams.postnbguest;
$scope.userid.facebook.cachedUserProfile.picture.data.url = $stateParams.postpicture;
How can I pass my picture in my Post page ?
Thanks for your time.
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
The buggy way to write it:
<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>
The correct way to write it:
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />
https://docs.angularjs.org/api/ng/directive/ngSrc
I'm trying to fill out a 2 column table in AngularJS. I'm using ng-repeat directive to fill out the table, but it's not's working the way I'm planning. My $scope.items is: [Coors, Jameson, Bacardi, Corona]
I want the table to look like this:
| Coors (0) | Jameson (1) |
| Bacardi (2) | Corona (3) |
however, it looks like this:
| Coors (0) | Coors (1) |
| Bacardi (2) | Bacardi (3) |
I'm confused as to why the [$index+1] directive in the my script is only working in the actual text portion of the script (in parenthesis), while the <item-card> div does not seem to properly displaying items[$index+1], and instead is displaying items[$index]. Here is my script:
<div class=row ng-repeat="item in items" ng-if="$index %2 ==0">
<div class="col col-50" ng-if="$index < items.length">
<item-card item="{{item[$index]}}"></item-card>
({{$index}})
</div>
<div class="col col-50" ng-if="$index +1 < items.length">
<item-card item="{{items[$index+1]}}"></item-card>
({{$index+1}})
</div>
</div>
Does anyone know why this might not be working as intended?
Edit: Including is itemcard.html.
<div class = "card" >
<img id = "cardImage" ng-src= "data:image/jpeg;base64,{{item.image}}" width = "100%"/>
{{item.cartQuantity}}
<cardHeader>{{item.itemName}}</cardHeader><br>
<cardHeader ng-if= "item.paksize >1">{{item.paksize}} pack</cardHeader>
<button class="button" ng-click="addToCart(item)">+</button>
<button class="button" ng-click="decrementCart(item)">-</button>
</div>
What you're trying to do seems a little odd to me. Rather than trying to split the array of items into even chunks of 2 columns with Directive Fu, might you consider using lodash.chunk?
<script>
angular.module('example', [ ])
.run(function($scope){
$scope.items = _.chunk([ /* . . . */ ], 2);
});
</script>
<div ng-app="example">
<div class=row ng-repeat="chunk in items">
<div class="col col-50">
<item-card item="{{chunk[0]}}"></item-card>
({{$index}})
</div>
<div class="col col-50">
<item-card item="{{chunk[1]}}"></item-card>
({{$index+1}})
</div>
</div>
</div>
If you wanted to be really Angular about it (a pun!), you could register lodash.chunk as a custom Filter instead:
<script>
angular.module('example', [ ])
.run(function($scope){
$scope.items = [ /* . . . */ ];
})
.filter('chunk', function(){
return _.chunk;
});
</script>
<div ng-app="example">
<div class=row ng-repeat="chunk in items | chunk:2">
<div class="col col-50">
<item-card item="{{chunk[0]}}"></item-card>
({{$index}})
</div>
<div class="col col-50">
<item-card item="{{chunk[1]}}"></item-card>
({{$index+1}})
</div>
</div>
</div>