I need to know which div is selected.
Check my code:
<divdsadsadasda
toggle(i) {
console.log(i) // i got index
}
I need to know which div is selected and return values from clicked item.
Instead of (click)="toggle(i)" replace it with (click)="toggle(training)" tht way you'll know which of the trainingExercises was selected.
<div *ngFor="let training of data.trainingExercises; let i = index;">
...
<div (click)="toggle(training)">
...
</div>
</div>
Related
how to populate data from first array on randomly selected card?
I want to make a random card in Angular, where every time I select the first card to click it will take the first value from the array and the other cards will be filled automatically with other array values. and click can only be done once. thank you.
here my code sandbox
here my angular component:
export class AppComponent {
arrayData: any = \["one", "two", "three"\];
value: any = "";
clicker() {
this.value = this.arrayData\[0\];
}
}
and this for html:
<div class="card" \*ngFor="let v of arrayData" (click)="clicker()"\>
<label\>{{value}}\</label\>
<p>
How to get arrayData[0] on card selected and filled in other card with
arrayData[1] and arrayData[2] then disable click
</p>
i hope any one can help me to solve this problem!!! thanks you.
You are looping the array in HTML, but in the loop, you are outputting one value from this.value three times.
Just loop the array, and use its elements to display, but only after a card was clicked. (The json pipe helps if the elements are objects...)
<div class="card" *ngFor="let v of arrayData" (click)="clicker()">
<label *ngIf="clicked">{{v | json}}</label>
</div>
<p>
How to get arrayData[0] on card selected and filled in other card with
arrayData[1] and arrayData[2] then disable click
</p>
and in TS:
clicked = false;
clicker() {
this.clicked = true;
}
You show as many cards as the length of array - ok. On each card you show value of the variable value - the same variable.
<div class="card" *ngFor="let v of arrayData" (click)="clicker()">
<label>{{value}}</label>
</div>
You have no association of card with values.
It would be helpful to add:
(You can also do better - programmatically create as many array objects as arrayData length)
cards: any = [
{ id: 1, value: null },
{ id: 2, value: null },
{ id: 3, value: null }
];
Now for each card you have the option to assign a value.
In template you can display:
<div
class="card"
*ngFor="let card of cards; let i = index"
(click)="onCardClick(i)"
>
<label>{{ card.value }}</label>
</div>
{{ card.value }} - value of unique card.
Pay attention to the *ngFor="let card of cards; let i = index" - we have an (incremented) index here - information about which card was clicked.
In onCardClick method we check whether the user has already performed such an operation.
onCardClick(index: number) {
if (!this.shuffled) {
this.clicker(index);
}
}
In else you can show the user an alert or whatever to let them know they've already done it.
If not, call the method clicker.
clicker(index: number) {
let arrayDataIndex = 1;
this.cards.forEach((card: any, idx: number) => {
if (index === idx) {
card.value = this.arrayData[0];
} else {
card.value = this.arrayData[arrayDataIndex];
arrayDataIndex++;
}
});
this.shuffled = true;
}
In foreach loop through the next elements of cards. If element has the same index as clicked card, assign first value of arrayData. Otherwise assign arrayData[1], arrayData[2]...
At least, this.shuffled = true, that the operation cannot be performed again.
I hope I understood what you wanted to accomplish :)
See working code
https://codesandbox.io/s/loving-wind-gku7vl
enter image description hereFollowing is just the overview of the code,as given in html code i just want to show the options from options array from set object and have to set checkbox checked to option which is an answer from answer array and have to add new answer to answer if i check more options with checkbox clicked, and have to remove answer if checkbox is unchecked.
<script>
var adminApp = angular.module('app',[]);
adminApp.controller('EditController', function ($scope) {
$scope.viewQuestions=function(){
set={}; //object in which answer array and option array is present //assume;
var answer= ["answer1", "answer2"]; //answer array assume
var options=["option1,option2,option3,option4"]; //option array assume
var answerType="Multiple";
}
$scope.updateAnswer =function(isSet,index,answer,set)
{
for(var i=0;i<set.answer.length;i++)
{
if(isSet===set.answer[i])
{
set.answer[index]=isSet;
}
else
{
set.answer.splice(index, 1);
}
}
}
}
</script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
</head>
<body ng-app="app" ng-controller="EditController" ng-init="viewQuestions()">
<table>
<tr>
<td ng-show="s.answerType === 'Multiple'">
<p ng-repeat="o in s.options">{{$index + 1}}. <input type="checkbox"
name="answer-{{index}}"
ng-model="isSet" value="{{o}}"
ng-change="updateAnswer(isSet,$index,answer,s)">{{o}}</p>
</td>
</tr>
</table>
</body>
</html>
This is not exactly what you want but it's something. I change the concept to do the same in a cleaner way and more angular style. (in my opinion)
I have an array of objects (name: The option title & active: Checked or not) And after each change I update the set. With filter & map; So, the set is always up to date
(If you receive a array of string as options, you can assume that all of them are Active: false)
Maybe it can works for you in general, or you can get an idea from the code.
http://plnkr.co/edit/GucWDwF66A56IkXHHpwG?p=preview
In angular, you can bind checkbox's checked property to a method that returns ids of your mini_array that is in main_array;
---your.html---
enter code here
enter code h
<div class="mb-2"><b>Permissions list</b></div>
<div formArrayName="permissions" *ngFor="let permission of main_array; let i=index">
<input class="mr-2" [checked]="isChecked(permission.id)" type="checkbox">
{{permission.name}}
</div>
---your.ts---
isChecked(id) {
return this.mini_array.includes(id);
}
I have a miller column constructed in Angular and Bootstrap.
http://codepen.io/smlombardi/pen/WGwGbY
In the second column, clicking the word (link) opens the third column, but I need to have the checkbox add that word to an array of search terms.
If the checkbox is UN-checked, I need to remove that word from the array of search terms. As you can see in the pen, I have the adding part working, but un-checking the box adds the word again.
I realize what I need to do is somehow check the state of the checkbox and if it's true add the word and if it's false check the array for the word (string) and pop it out of the array.
I can't figure out how to check only the checkbox that was clicked.
<div class="col-xs-3 inner-column">
<div class="panel panel-default">
<div class="list-group">
<div class="list-group-item" ng-class="{active: $index === pmt.millercolumn.level1Selected }" ng-repeat="level1 in pmt.millercolumn.level1 track by $index">
<input type="checkbox" ng-model="activeSearchTerm" ng-change="pmt.change($index)" id="ng-change-example1" />
<a href="" ng-click="pmt.getSublevel2($index)" >
{{level1.name}}
<i class="pull-right fa fa-angle-right fa-lg"></i>
</a>
</div>
</div>
</div>
the ng-change on the checkbox calls:
_this.change = function (index) {
var searchTerm = _this.millercolumn.level1[index].name;
_this.searchTerms.push(searchTerm);
};
It looks like you're thinking in a jquery mindset where you need to handle events when something changes. An easier way would be to make each checkbox correspond to an item in the array, so the ng-model would be something like level1.isSelected. Then, to construct your search terms array, use scope.$watch and pass true as the 3rd argument to deep watch your array of items. When a checkbox is checked, your watch will be called and you can reconstruct the search terms array by plucking the terms of the list items that are selected.
Add this code in place of your _change function it works for sure
_this.change = function (index) {
console.log('Clicked on', _this.millercolumn.level1[index].name);
var searchTerm = _this.millercolumn.level1[index].name;
var searchIndex = _this.searchTerms.indexOf(searchTerm);
if (searchIndex == -1) { // If new push
_this.searchTerms.push(searchTerm);
}
else { // Else remove item
_this.searchTerms.splice(searchIndex, 1);
}
console.log(_this.searchTerms);
};
Working codepen demo : http://codepen.io/krishcdbry/pen/EgKgBv
You're running the same code no matter if the checkbox is checked or not. Try something like this:
_this.change = function (index, checked) {
var searchTerm = _this.millercolumn.level1[index].name;
if(checked){
_this.searchTerms.push(searchTerm);
}
if(!checked){
_this.searchTerms.splice(searchTerm);
}
};
FWIW, this is what I did, which works:
<input type="checkbox" ng-model="level1.isSelected" ng-change="pmt.change($index, level1)" id="mycb" />
_this.change = function (index, item) {
if (item.isSelected) {
_this.searchTerms.push(item.name);
} else {
var termToRemove = item.name;
for (var i = _this.searchTerms.length - 1; i >= 0; i--) {
if (_this.searchTerms[i] === termToRemove) {
_this.searchTerms.splice(i, 1);
}
}
}
};
I'm new in angularjs and razor. so please help me. I have such code
<div ng-app="">
<p>Input page number to filter: <input type="text" ng-model="pageNumber"></p>
<div class="table-bordered">
#{
string pageNo = "0";
}
#foreach (var item in Model.sol)
{
if (pageNo != item.TaskPageNo.ToString())
{
pageNo = item.TaskPageNo.ToString();
<div id="PAGENUMBER" class="text-success" ng-show="**CONDITION**"><abbr title="select something">Page - #pageNo</abbr></div>
}
var pt = pat + item.Task_ID;
#item.TaskNo
}
</div>
</div>
I don't know how to set the CONDITION value using AngularJS...
I want to type into 'PageNumber' input box some value and filter pages, so the condition must be something like this
if (PAGENUMBER.value.indexOf(pageNumber.value)>-1) { show this page
number } else { hide it }
The ID PAGENUMBER is only used here in question not in real code
How can I do this ? pleease help :)
You need to get your data using angular and then use ng-repeat over that data. Then you can add a filter on the ng-repeat based of your input ng-repeat="item in items | filter: {pageNumber: pageNumber}":
if you set PAGENUMBER like #pageNo
for your checking you can use simple condition like
<div id="#pageNo" class="text-success" ng-show="'#pageNo'.indexOf(pageNumber) > -1"><abbr title="select something">Page - #pageNo</abbr></div>
I'm listing an array of names in my view like this:
<div class="checkbox col-md-3" ng-repeat="staff in stafflist | orderBy: 'name'">
<div class="checkboxinner">
<button class="btn btn-staff form-control"
ng-show="!staff.chosen"
ng-click="pushStaff(staff)">
{{staff.name}}
</button> // visible when unselected, invisible when selected
<button class="btn btn-primary form-control"
ng-show="staff.chosen"
ng-click="unpushStaff(staff, $index)">
{{staff.name}}
</button> // visible when selected, invisible when unselected
</div>
</div>
The first button triggers this function, adding the object into the array and being replaced with another button (different color, same content) that is supposed to act as a toggle. This function works perfectly.
$scope.paxlist = [];
$scope.pushStaff = function (staff) {
staff.chosen = true;
$scope.paxlist.push(
{
name: staff.name
}
);
console.log($scope.paxlist);
};
Basically, when I click I add the object, when I click again, I remove it. Here's the remove function:
$scope.unpushStaff = function (staff, $index) {
staff.chosen = false;
var index=$scope.paxlist.indexOf(staff)
$scope.paxlist.splice(index,1);
console.log($scope.paxlist);
}
My problem is that the unpushStaff() will indeed remove an item, but not the item I clicked to remove, but another one.
What am I missing?
Maybe the ng-show is messing with the $index?
Your staff entry in stafflist and the entry in paxlist are not identical. Based on your template below:
<button class="btn btn-staff form-control"
ng-show="!staff.chosen"
ng-click="pushStaff(staff)">
{{staff.name}}
</button> // visible when unselected, invisible when selected
It is clear that each staff entry in stafflist is some sort of object that has at least one attribute name and another chosen.
When you push onto paxlist, you are creating a new object that looks like:
$scope.paxlist.push(
{
name: staff.name
}
);
This is fine. But when you then come to remove it, you are looking for it by:
var index=$scope.paxlist.indexOf(staff)
where staff is the object in stafflist! Of course, that object does not exist in paxlist - a separate object you derived above in paxlist.push() is - and so indexOf() is returning -1, leading splice() to remove the last item on paxlist.