Ok, the issue here is pretty simple but i just can't think how to solve it.
I need to create a table with 5 lines and 5 columns with a sequential numbers [1..25] with checkboxes inside each column/row. Each checkbox has it value (between 1 and 25)
I wrote a code to generate the image above, just looping columns, but writing every row separately
<div class="row">
<div class="col" ng-repeat="n in [1, 5] | makeRange">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
</label>
{{n}}
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="n in [6, 10] | makeRange">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
</label>
{{n}}
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="n in [11, 15] | makeRange">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
</label>
{{n}}
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="n in [16, 20] | makeRange">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
</label>
{{n}}
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="n in [21, 25] | makeRange">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
</label>
{{n}}
</li>
</ul>
</div>
</div>
Is there a way to write this code in 2 loops only? I was thinking in something like the code below, but obviously doesn't work.
<div class="row" ng-repeat="n in [1, 4] | makeRange">
<div class="col" ng-repeat="p in [1, 4] | makeRange">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="p" value="{{n}}">
</label>
{{p * n}}
</li>
</ul>
</div>
</div>
The solution doesn't have to be in angular, but if it be will be much appreciated ! :)
Thanks!
Not sure where you got the "makeRange" directive, certainly not a default ng one.
All you need to do to make this work is to create a function on your controller to calculate your n and p values.
So, your HTML should look like this:
<div ng-app='myApp' ng-controller="Main">
<div class="row" ng-repeat="n in range(0,4)">
<div class="col" ng-repeat="p in range(1,5)">
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checklist-model="game.numbers" checklist-value="p" value="{{n}}">
</label>
{{n*5+p}}
</li>
</ul>
</div>
</div>
And your JS like this:
var myApp = angular.module('myApp', []);
function Main($scope){
$scope.range = function(min, max){
var input = [];
for (var i=min; i<=max; i++) input.push(i);
return input;
};
};
Sample here on Fiddler: http://jsfiddle.net/sqren/ZBrJB/
I would just create the array in plain javascript and then use ng-repeat on that array from the scope. I did this in nested rows but could do it all in one array and use css to adjust positioning
Controller:
app.controller('MainCtrl', function($scope) {
var ctr=0;
$scope.rows = [];
for (var i = 0; i < 5; i++) {
var row = [];
for (var j = 0; j < 5; j++) {
ctr++;
row.push({val: ctr})
}
$scope.rows.push(row);
}
});
Markup:
<div ng-repeat="row in rows" class="row">
<ul class="list">
<li class="item item-checkbox" ng-repeat="item in row">
<label class="checkbox">
<input type="checkbox" ng-model="item.checked" />{{item.val}}
</label>
</li>
</ul>
</div>
DEMO
Related
I Have below ngFor I want to remove first four character of c.FilmCode
<li class="">
<a [(ngModel)]="selectedmovies" ngDefaultControl name="" class="form-control" (click)="togglemovies()" id="cbocmovies" [ngModelOptions]="{standalone: true}">{{selectedmoviestext}}</a>
<div [ngClass]="{toggleMovie:IsToggleMovie==true}" *ngIf="movies.length > 0">
<ul class="clearfix">
<li *ngFor="let c of movies" [value]="c.FilmCode" (click)="OnMoviesChange(c.FilmTitle,c.FilmCode)">{{c.FilmTitle}}</li>
</ul>
</div>
</li>
Below is ts code
showmoviecombo(CinemaId) {
this.common.createAPIService('api/cinemas/GetListByCinemaId?CinemaId=' + CinemaId, '').subscribe((result: any) => {
this.movies = result;
//this.movieids = this.movies.FilmCode;
console.log(this.movieids);
});
}
Is there any way to do it?
You can also use Slice for removing the first four character
<li class="">
<a [(ngModel)]="selectedmovies" ngDefaultControl name="" class="form-control" (click)="togglemovies()" id="cbocmovies" [ngModelOptions]="{standalone: true}">{{selectedmoviestext}}</a>
<div [ngClass]="{toggleMovie:IsToggleMovie==true}" *ngIf="movies.length > 0">
<ul class="clearfix">
<li *ngFor="let c of movies" [value]="c.FilmCode" (click)="OnMoviesChange(c.FilmTitle,c.FilmCode)">{{c.FilmTitle.slice(4)}}</li>
</ul>
</div>
You can use substring on your string value method
<li class="">
<a [(ngModel)]="selectedmovies" ngDefaultControl name="" class="form-control" (click)="togglemovies()" id="cbocmovies" [ngModelOptions]="{standalone: true}">{{selectedmoviestext}}</a>
<div [ngClass]="{toggleMovie:IsToggleMovie==true}" *ngIf="movies.length > 0">
<ul class="clearfix">
<li *ngFor="let c of movies" [value]="c.FilmCode" (click)="OnMoviesChange(c.FilmTitle,c.FilmCode)">{{c.FilmTitle?.substring(4)}}</li>
</ul>
</div>
</li>
I am new to Angular and learning by implementing a chat application.
I am trying to pass the checkbox values to my JS code. Below are the snippets. The problem I am facing is I am unable to get the checked values in JS. I am getting i.value as undefined. Can you please point out where am i going wrong?
<div class="add-friends panel-primary panel" ng-show="addfriendsselected">
<div class="panel-heading text-center" >Add Friends</div>
<div class="panel_body">
<div class="row" id=myForm>
<ul class="list-group">
<li class="list-group-item" ng-repeat = "user in friendslist">
<div>
{{user.firstName}}
{{user.email}}
<input type="checkbox" name="checkbox" value= "{{user}}">
</div>
</li>
<div ui-view></div>
</ul>
</div>
</div>
<form id=userForm ng-submit="createGroup()">
<input class="btn btn-default" type="submit" value="Create Group">
</form>
</div>
Controller
$scope.createGroup = function() {
console.log("Entered createGroup ");
$("input[type=checkbox]:checked").each(function(i){
console.log("i.value :"+i.value);
$scope.people.push( i.value );
});
console.log("$scope.people : " + JSON.stringify($scope.people));
}
Just add object property as ng-model to the checkbox
<input type="checkbox" name="checkbox" ng-model="user.check">
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.friendslist = [{"firstName":"sss","email":"ss#gmail.com"}]
$scope.createGroup = function() {
console.log($scope.friendslist)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="add-friends panel-primary panel" >
<div class="panel-heading text-center" >Add Friends</div>
<div class="panel_body">
<div class="row" id=myForm>
<ul class="list-group">
<li class="list-group-item" ng-repeat = "user in friendslist">
<div>
{{user.firstName}}
{{user.email}}
<input type="checkbox" name="checkbox" ng-model="user.check">
</div>
</li>
<div ui-view></div>
</ul>
</div>
</div>
<form id=userForm ng-submit="createGroup()">
<input class="btn btn-default" type="submit" value="Create Group">
</form>
</div>
</div>
Suggest you use ngModel directive as shown in the Angular documentation for input[checkbox].
Also, it might be useful for you to create a separate component (or directive) for each li in friendslist.
Hope it helps. Good luck;)
I have step form with 3 steps. I want to get index of <li> in stepinstallment when <label> inside it selected to check:
If the first step is selected, it will change background color of circle class.
If the second and third step is selected without first step, it will display error message.
I've tried many ways on SO and write myself but it doesn't work.
This is my code
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment">
<ul>
<li id="step-one" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
JS
var sCircle = $('.steps ul li');
$('.step label').on('click', function(){
var $this = $(this),
sCircleIndex = parseInt(sCircle.index()),
sCircleChild = sCircle.children('div'),
currParent = $this.parents('ul').index();
console.log(currParent);
});
Above JS code always return 0. Hope anyone can figure me out this case. Thanks in advance.
Try using .closest()
$(".stepinstallment label").on("click", function() {
console.log($(this).closest("li").index())
});
$('.stepinstallment label').on('click', function(){
console.log($(this).closest("li").index())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment">
<ul>
<li id="step-one">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
I hope this example will help you out !!!
$("ul#wizard li").click(function () {
var index = $("ul#wizard li").index(this);
if(index!=0)
alert("error ")
else
alert("index is: " + index)
});
<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<p>Some random tag</p>
</ul>
$('.step label') will not return any elements, since there is no html matching the css selector
I can't see the .steps and .step class in your html.
with your html, I guess this code will work
$('.stepinstallment').on('click', 'label', function (e) {
var $this = $(this);
var li = $this.parents('li');
console.log(li.index());
});
the steps of the code:
get the label element
get the li element contain the label
get the index
There is no click on label... it is empty. You can bind click on checkbox, the find the index of li and base on it color the same index of LI in your circle UL:
var sCircle = $('.steps ul li');
$('input[type=radio]').on('click', function(){
var liIndex=$(this).parents('li').index();
if(liIndex>0){
alert('error')
}
else{
$('ul.clearfix>li:eq('+liIndex+')').css('background-color','red')
}
});
JSFIDDLE
$(document).ready(function(){
var sCircle = $('.steps ul li');
$('.step label').on('click', function () {
var currentLi = $(this).parents('li')[0];
currentLiIndex = -1;
sCircle.each(function (index) {
if (sCircle[index] == currentLi) {
currentLiIndex = index;
}
});
console.log(currentLiIndex);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment steps">
<ul>
<li id="step-one">
<h2>Choose your document</h2>
<div class="step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two">
<h2>Choose your document</h2>
<div class=" step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three">
<h2>Choose your document</h2>
<div class="step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
This is what you need to do.
$('.step-content label').on('click', function(){
var clickedId = $(this).parents('li').index();
if(clickedId == 0) {
$('.circle').css('background-color','yellow');
} else {
alert('error');
}
});
Working example in jsfiddle https://jsfiddle.net/1uxus551/
I need to save a value into localstorage thats already in localstorage and only increase that by 1
Save:
function checkklaar2() {
a = document.getElementById("eindgetal2").value;
if (a == "0") {
window.location.href = 'winnaar2.html';
var gewonnen2 = localStorage.getItem("setsgewonnen2");
localStorage.setItem("setsgewonnen2.2", gewonnen2.value + "1");
} else {}
}
View:
// Check browser support
if (typeof(Storage) != "undefined") {
// Store
// Retrieve
document.getElementById("result1.1").innerHTML = localStorage.getItem("naamspeler1.1");
document.getElementById("result2.1").innerHTML = localStorage.getItem("naamspeler2.1");
document.getElementById("result1.2").value = localStorage.getItem("setsgewonnen1.2");
document.getElementById("result2.2").value = localStorage.getItem("setsgewonnen2.2");
document.getElementById("sets").value = localStorage.getItem("setstespelen");
document.getElementById("sets2").value = localStorage.getItem("setstespelen");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
Inputs on receive because it is not showing the value in the inputs on page 2:
HTML:
<h1 style="margin-left:15px;">Speler<div id="result1.1"></div> </h1>
<div class="list-block">
<ul>
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-title label">Sets gewonnen</div>
<div class="item-input">
<input type="number" id="result1.2">
</div>
</div>
</li>
</ul>
<ul>
<li>
<div class="item-content">
<div class="item-title label">Sets totaal</div>
<div class="item-input">
<input type="number" id="sets">
</div>
</div>
</li>
</ul>
</div>
</ul>
</div>
<h1 style="margin-left:15px;">Speler <div id="result2.1"></div></h1>
<div class="list-block">
<ul>
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-title label">Sets gewonnen</div>
<div class="item-input">
<input type="number" id="result2.2">
</div>
</div>
</li>
</ul>
<ul>
<li>
<div class="item-content">
<div class="item-title label">Sets totaal</div>
<div class="item-input">
<input type="number" id="sets2">
</div>
</div>
</li>
Thanks in advance!
I think you are searching for something like this:
localStorage.setItem("setsgewonnen2.2", parseInt(gewonnen2.value) + 1);
As normaly locall storage store everything as a string
As an example, I'm starting with html like this:
<div id="leftSide">
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
</div>
The idea being, when I select an item i.e. .choice I want to add it to the input and the .theChoice. This way it displays what the user chose but they can edit it by typing the box.
I know how to do this with jquery. However, it will be a lot of overhead and I want to learn angular. I also know Angular can really clean this up.
I've used ng-model to mirror what a user types in the input box doing this:
<div id="leftSide">
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" ng-model="choice1" />
</div>
<p class="theChoice">{{choice1}}</p>
</div>
...
</div>
I've used ng-repeat to loop out three of the .item divs:
<div id="leftSide" ng-controller="leftSide">
<div class="item" ng-g-repeat="i in getNumber(number) track by $index">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" ng-model="choice1" />
</div>
<p class="theChoice">{{choice1}}</p>
</div>
...
</div>
and js:
myApp.controller('leftSide',function($scope,$index){
//three left boxes
$scope.number = 3;
$scope.getNumber = function(num) {
return new Array(num);
}
...
});
The problem I have is (obviously) selecting the .choice' is targeting all myng-models and not each that associate to its.editor. I'm certain I can use$indexto handle this and/or maybe ng-click. I'm just a little lost on how to target the correct one based on the.choice` I select.
I don't like the jQuery implementation, so I tried to solve your problem by pure AngularJS. You can run the snippet to check the answer:
var app = angular.module('my-app', [], function() {
})
app.controller('AppController', function($scope) {
$scope.number = 3;
$scope.choice = [];
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.choiceClick = function(i) {
debugger;
$scope.choice[i] = 'This is choice';
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="my-app" ng-controller="AppController">
<div class="item" ng-repeat="it in getNumber(number) track by $index">
<div class="editor">
<ul class="choices">
<li class="choice" ng-click="choiceClick($index)">This is choice</li>
</ul>
<input class="myChoice" ng-model="choice[$index]" />
</div>
<p class="theChoice">{{choice[$index]}}</p>
</div>
</body>