angular 2 ngfor reverse order and same index - javascript

I have an app that display an array items in panel
using this code
<div *ngFor="let object of questionAnswer | reverse let i = index" [attr.data-index]="i">
<p-panel header="{{object.question}}" [toggleable]="true" [collapsed]="true">
<div class="row">
<div class="col-sm-6">
{{object.answer}}
</div>
<div class="col-sm-6">
<button type="button" class="paneltools btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog fa-fw" aria-hidden="true"> </i> <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a (click)="editShow(i)">Edit</a></li>
<li><a (click)="remove(i)">Delete</a></li>
</ul>
</div>
</div>
</p-panel>
</div>
i wanted to display the items in reverse order as to show the newer item first and by using the a pipe code i found here works fine
export class ChallengesReversePipe {
transform(value) {
return value.slice().reverse();
}
}
but my big problem is when doing it like this im getting a reverse index number and i need the original index number from before the inverse for example
the index for the top item should be the last index number in the array
and i cant seem to find a way to get it :(
any help please?

You could try something like this:
[attr.data-index]="questionAnswer.length - i - 1"

[attr.data-index]="questionAnswer.length - i - 1" didn't work for me but I replaced all occurrences of i by "yourArray.length - i - 1" which did the job

Related

sorting bootstrap modal-body elements in Javascript/Jquery when the page loads

I am working on the fiddle in which I want to sort multiple rows (Row1 having def and Assign a Computer Section, Row2 having abc and Assign a Computer Section, etc) coming from Bootstrap Modal.
At this moment, the rows are not sorted in the modal. The HTML/Bootstrap code which I have used in order to create the modal is :
<div class="row-computerlabel form-group clearfix">
<div class="editcomputerlabel col-sm-5">abc</div>
<div class="assigncomputerlabel col-sm-5">
<div class="btn-group bootstrap-select show-tick computerlabelscomputerselector">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Assign a computer"><span class="filter-option pull-left">Assign a computer</span> <span class="bs-caret"><span class="caret"></span></span></button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu"></ul>
</div>
<select class="computerlabelscomputerselector selectpicker" multiple="" title="Assign a computer" tabindex="-98"></select>
</div>
</div>
<div class="deletecomputerlabel col-sm-2"><button class="btn btn-link btn-delete" data-task="deletelabel" title="Delete group" type="button"><i class="fa fa-trash-o"></i></button></div>
</div>
Problem Statement:
I am wondering what plain Javascript or Jquery code I need to add above so that all the contents in the Bootstrap Modal get sorted meaning abc, def, jkl text should show up first with their assigned computers in the fiddle when the page loads.
You could use the sort function of JavaScript.
jQuery
$(document).ready(function(){
var rowComputer = $('.row-computerlabel');
rowComputer.sort(function(a,b){
var label1 = $(a).children('.editcomputerlabel').text();
var label2 = $(b).children('.editcomputerlabel').text();
return label1 >= label2;
});
rowComputer.appendTo('#computerlabeltable');
});
This piece of code is really simple. You have in the rowComputer variable all your rows.
You apply the sort function on your array and you need to specify the condition of your sorting (here it needs to be sorted alphabetically).
Finally, you append your array containing your rows in the div englobing all yours rows.
jsFiddle
Here is a jFiddle link : http://jsfiddle.net/Lqam4g2u/

jquery to match <p> values based on a given value

I have a grid of staff in divs on a page and within each div i have added a new 'filter-content' div which contains the ids of various criteria that apply to this member of staff. Such as 'specialisms', 'region', 'joblevel' etc.
Here is my mark up:
foreach (SearchFirmRecruiter searchFirmRecruiter in Model.OrderBy(o => o.LastName))
{
bool blnUserDeactivated = searchFirmRecruiter.DateRemoved.HasValue;
string strCipher = #searchFirmRecruiter.getSearchFirmRecruiterCipherId();
<div class="col-md-4">
<div class="panel panel-default text-center #(blnUserDeactivated ? "deactivated" : "")">
<div class="panel-body">
<i class="fa fa-user-circle-o fa-3x"></i>
<p class="h4"><b>#searchFirmRecruiter.FirstName #searchFirmRecruiter.LastName</b></p>
<div class="filter-content">
<p class="specialisms"><b>#searchFirmRecruiter.Specialism</b></p>
<p class="regions"><b>#searchFirmRecruiter.Regions</b></p>
<p class="supplierType"><b>#searchFirmRecruiter.SupplierType</b></p>
<p class="jobLevel"><b>#searchFirmRecruiter.JobLevel</b></p>
</div>
<p>#searchFirmRecruiter.Email</p>
#if (blnUserDeactivated)
{
//Set the value
blnShowDisabledRecruitersLink = true;
<a data-href="#Url.Content("~")SearchFirm/ActivateRecruiter/#searchFirmRecruiter.getSearchFirmRecruiterCipherId()" data-toggle="confirmation" data-btn-ok-icon="fa fa-check" data-btn-cancel-icon="fa fa-remove" data-container="body" data-placement="top" class="btn btn-sm btn-success"><i class="fa fa-check margin-right-spacing"></i>Enable</a>
}
else
{
<i class="fa fa-pencil margin-right-spacing"></i>Edit
<span data-toggle="tooltip" data-placement="bottom" data-container="body" data-trigger="hover" title="" data-original-title="This user will no longer be able to access their jobs and submit any candidates"><a data-href="#Url.Content("~")SearchFirm/DeactivateRecruiter/#strCipher" data-toggle="confirmation" data-btn-ok-icon="fa fa-check" data-btn-cancel-icon="fa fa-remove" data-placement="top" class="btn btn-sm btn-danger"><i class="fa fa-remove margin-right-spacing"></i>Disable</a></span>
}
</div>
</div>
</div>
}
On the page the filter-content div looks like this:
,19,17,25,
,6,9,12,16,19,
,1,
,1,2,4,
Down the left hand side of the page i have some filter options, one for each of the classes above. So these will list all the 'specialisms', 'regions' etc as checkboxes. When a filter checkbox is selected i am running a javascript function to filter for that filter type. So, for example, if a user selects the 'Accountancy' specialism and that is id 25. I want to only show the members of staff that have that 'Accountancy' specialism.
As the filters are clicked so the members of staff will be shown if they meet the criteria.
I am completely new to JQuery but i'm pretty sure this is the best way to achieve what i want.
I have a javascript function for each filter which passes in the selected filter value, within this funtion, ideally, i want to firstly hide all the divs and then show only the ones that match the filter criteria. At the moment i am just playing around with trying to return the specialisms, once i have those i can do some logic to determine if the passed in specialismId is contained and therefore whether this member of staff should be shown or not
function filterSpecialism(specialismId) {
alert(specialismId);
alert($(".filter-content").find('p').find('specialisms').val)
}
Here is an image of how the page currently looks, so within this example Accountancy is selected as the filter, this is specialism id 25 so only James Dibner and Harjinder Royston should be shown
example
I hope that all make sense and i appreciate any answers or suggestions. Many thanks all

Appending rows to nested rows issue?

I'm making a table with nested row's.
The thing is that when I append a child row to a parent row all other parent rows append a child row also.
Use function:
$scope.templates=[{src:'template'}];
$scope.include = function(templateURI) {
$scope.templates.push({src:templateURI});
}
Append row:
<button class="btn btn-default btn-sm ng-scope" ng-click="include('rowInRow.html')">
<i class="glyphicon glyphicon-upload"></i>
</button>
Show template:
<div ng-repeat="template in templates">
<div ng-include="template.src">My template will be visible here</div>
</div>
Can somebody give me a hint?
I tried to do it myself but I didn't find what I need.
Try this: http://plnkr.co/edit/ZzPF7UFjKyp2tqn27cf4?p=preview
All of the projects are sharing the templates collection. Solve this by giving each project its own templates array and iterating through that.
Make the include function into:
$scope.include = function(project, templateURI) {
if (!project.templates)
project.templates = [];
project.templates.push({src:templateURI});
}
Call it like this:
<button class="btn btn-default btn-sm ng-scope" ng-click="include(project, 'rowInRow.html')">
<i class="glyphicon glyphicon-upload"></i>
</button>
Show it like this:
<div ng-repeat="template in project.templates">
<div ng-include="template.src">My template will be visible here</div>
</div>

How do I pass back a specific variable of an ng-repeat?

I have an ng-repeat that repeats a dropdown. Each repeated div that holds the dropdown has a unique ID generated by the controller that I can reference.
How can I pass back the selected option for that specific dropdown? Right now, if one dropdown is selected, the value for selectedParameter.name changes for all dropdowns.
<div id="{{ mergeVar.name }}" class="alert {{ selectedParamClass }}" ng-repeat="mergeVar in mergeVars">
<b>merge value: </b> {{mergeVar.name}}
<div class="dropdown pull-right">
<button type="button" class="btn btn-sm btn-control dropdown-toggle" data-toggle="dropdown">
{{selectedParameter.name || 'Match the Paramater'}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="param in availableParams">
<a ng-click="selectParameter(parampass)">{{param.name}}</a>
</li>
</ul>
</div>
</div>
//controller.js
$scope.selectParameter = function(parampass) {
console.log('parameter selected')
$scope.selectedParameter = parampass
$scope.selectedParamClass = 'alert-success'
}
Do this instead to affect only one instance of your object:
$scope.selectParameter = function(parampass) {
console.log('parameter selected')
parampass.selectedParamClass = 'alert-success';
}
What you need is to add the property to the instance "row" object.
You can still store the selected object:
$scope.selectedParameter = parampass
But based on what I see in your code what you probably want do to is to use the ng-class="selectedParamClass" when an item is selected for the object selected.

AngularJS Nested Ng-repeat Counter Decrementation

I am trying to decrement a counter within a nested AnguarJs ng-repeat. I know it is a problem of scope, because the increment in the outer ng-repeat works fine, but in the inner ng-repeat is where I have to decrement and that is where I run into the problem (nothing happens). Is there any way to get an inner scope to increment/decrement/affect an outer scope? Here is the code I am working with.
<div class = "col-md-12 section-bg-conversations" ng-repeat="o in form.question | filter:searchText | orderBy:predicate" ng-show="$index<5 || form.showMoreQuestions" >
<!--section for question and option to answer-->
<span class="pull-left" style="margin-bottom:5px">
<ul style="color:#107A77; margin-left: -10px; list-style-type:none">
<li >
<!--below is only to toggle form view-->
<h7><strong><a style="color:#107A77;" ng-click="o.Answer = true" ng-show="!o.Answer">Comment</a></strong></h7>
</li>
<li>
<h7 ng-init="replyCounter=o.replyCounter">Replies ({{replyCounter}}) </h7>
</li>
<li>
<h7>
<a style="color:#107A77;text-size: 6px"
ng-init="followCounter=o.followCounter" ng-click="followConversation(o.id); o.isFollowing=true;
followCounter=followCounter+1" ng-show="!o.isFollowing">
Follow ({{followCounter}})
</a>
<span ng-show="o.isFollowing">
Following ({{followCounter}})
</span>
</h7>
</li>
</ul>
</span>
<span ng-show="o.isFollowing">
<a style='color:gold' ng-init="followCounter = o.followCounter" ng-click="unfollowConversation(o.followId); o.isFollowing = false;
followCounter = followCounter-1 " ng-hide="o.unfollowValue">Unfollow</a>
</span>
<!--form div below showing only submit and cancel-->
<div style="margin-top:5px">
<button class="btn btn-xs btn-primary" ng-init="replyCounter=o.replyCounter" style='background:#107A77'
ng-click="submitAnswer(o.id); replyCounter = replyCounter+1;">Submit</button>
<button class="btn btn-xs btn-primary" style='background:red' ng-click="o.Answer = false" ng-show="o.Answer">Cancel</button>
</div>
<div class = "col-md-offset-1" style="padding:5px"ng-repeat="a in o.replies" ng-show="$index<3 || o.showMoreReplies">
<span ng-show="a.isAuthor">
<a ng-init="replyCounter=o.replyCounter"style='color:red' ng-click="doDelete(a.id); a.deleteValue = true;
replyCounter = replyCounter-1">Delete</a>
</span>
</div>
I also included the followCounter as an exmaple of a counter that is working. Pretty much the main problem is in the last inner div that does ng-repeat="a in o.replies" and I'm not sure how to solve the problem of incrementing/decremeting the counter in the overall scope.

Categories