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

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.

Related

How can I use <div> list instead of <select> dropdown for a languages switcher?

I want to use <div> instead of <select> to list options for a languages switcher. But the problem is i don't know how to pass the value to the jQuery function.
here is my <select> html code
<select id="langSelector">
<option>lang</option>
<option value="de">de</option>
<option value="jp">jp</option>
</select>
What i want to use instead
<div id="langSelector" class="dropdown-menu position-absolute" aria-labelledby="language-dropdown">
<a value="de" class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/de.png" class="flag-width" alt="flag"> <span class="align-self-center"> German</span></a>
<a value="jp" class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/jp.png" class="flag-width" alt="flag"> <span class="align-self-center"> Japanese</span></a>
</div>
My Jquery Code
<script type="text/javascript">
var l = new LanguageSelector();
$(function(ready){
$("#langSelector").change(function() {
var s = $(this).children("option:selected").val();
l.setLang(s);
window.location = '1.html';
});
});
l.parse();
</script>
i try to change value"" to data-value"" and option:selected to a:selected > span:selected > a.selected but nothing seems to work
<div id="langSelector" class="dropdown-menu position-absolute" aria-labelledby="language-dropdown">
<a data-lang="de" class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/de.png" class="flag-width" alt="flag"> <span class="align-self-center"> German</span></a>
<a data-lang="jp" class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/jp.png" class="flag-width" alt="flag"> <span class="align-self-center"> Japanese</span></a>
</div>
<script>
var languageSelector = new LanguageSelector();
$('[data-lang]').on('click', function(){
var selectedLang = $(this).data('lang');
languageSelector.setLang(selectedLang);
// DO THE REST OF CODE HERE
});
</script>
So store the data in an HTML5 Data Attribute. Since Im assuming your creating a fake downdown to control useragent styles better (<- my frontends do this alot) we will collect jquery html elements by using the [data-lang] as a selector which will return all the data-lang set elements on the page if you would like to restrict it you may need to use ....
$('a[data-lang]')...
or
$('#langSelector > a[data-lang]')....
then use the click listener to return $(this) which will be the current clicked link and access its data('lang') attribute and pass that to lang

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/

angular 2 ngfor reverse order and same index

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

Click button to copy text to another div with angularjs

I have a list of Items with different button with them. Plunker
Quick View:
I want something like if I click on any of the buttons, related text will be copy to the div above. Also if I click on the button again it will removed from the Div.Same for each of the buttons. [I added manually one to show how it may display ]
I am not sure how to do that in Angular. Any help will be my life saver.
<div ng-repeat="item in csTagGrp">
<ul>
<li ng-repeat="value in item.csTags">
<div class="pull-left">
<button type="button" ng-class='{active: value.active && !value.old}' class="btn btn-default btn-xs">{{value.keys}}</button>
<span>=</span>
</div>
<div class="pull-left cs-tag-item-list">
<span>{{value.tags}}</span>
</div>
</li>
</ul>
</div>
The simplest thing would be to use $scope.tags object to store selected tags and add/remove them with the scope method similar to this:
$scope.tags = {};
$scope.toggleTag = function(tag) {
if (!$scope.tags[tag]) {
$scope.tags[tag] = true;
}
else {
delete $scope.tags[tag];
}
};
Demo: http://plnkr.co/edit/FrifyCrl0yP0T8l8XO4K?p=info
You can use ng-click to put in your scope the selected value, and then display this value instead of "Win".
http://plnkr.co/edit/IzwZFtRBfSiEcHGicc9l?p=preview
<div class="myboard">
<span>{{selected.tags}}</span>
</div>
...
<button type="button" ng-click="select(value)">{{value.keys}}</button>

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