Array values of checkbox - javascript

I just want to value my check_list[], so it will contain array $file.
If user clicks checkbox, it will contain all the data in 1 file..
I tried to concatenate but then grouping them was a problem.
I tried hidden values, but got only 1 file values.
#foreach($files as $file)
<tr>
<td><input type="checkbox" name="check_list[]" ></td>
<td>{{ $file['file_name'] }}</td>
<td>{{ $file['file_type'] }}</td>
<td>{{ $file['file_modified'] }}</td>
<td>{{ $file['file_size'] }}</td>
<td>{{ $file['location'] }}</td>
</tr>
#endforeach
Pls. help Im stuck on this problem..


You can use the following approach:
var selectedvalues = new Array();
$("input[name='check_list[]']:checked").each(function() {
selectedvalues.push($(this).val());
});
You can see other alternative ways here: Select values of checkbox group with jQuery

Related

Display object inside of array inside Angular

I'm trying to display the object name of a the suppliers array but i'm confused because its inside an array. I'm display the array and also i want to display the object name of the second array. But the problem is on the second array. The supplier.name is i want to display it. The pic is below
[PICTURE IS HERE][1]
ts
getAllMaterials() {
this.subscription = this.materialsService.getAll()
.subscribe(
(data:any) => {
this.materials = data.materials;
let suppliers = data.materials[0].suppliers;
console.log(data);
console.log(suppliers);
},
error => {
alert("Error");
console.log(error);
});
}
html
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>display on this td</td>
<td>{{ material.price }}</td>
<td>
</tr>

So you can do two things :
Solution 1 : If you have only single record in suppliers
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td>{{material.suppliers[0].name}}</td>
<td>{{ material.price }}</td>
<td>
</tr>
Solution 2 :
If you want to show multiple names in same td :
<tr *ngFor="let material of materials">
<td>{{ material.sku }}</td>
<td>{{ material.name }}</td>
<td><span *ngFor ="let s of material.suppliers"> {{s.name}}
</span>
</td>
<td>{{ material.price }}</td>
<td>
</tr>

Replace table row with JQuery

I encountered an error in replacing my row in my JQuery. This is my code snippet for my JQuery:
var newtr = '<td>'+data.row.createdDate+'</td>'+
'<td>'+data.row.emergencyOrderID+'</td>'+
'<td>'+data.row.firstName+' '+data.row.lastName+'</td>'+
'<td>('+data.row.latitude+','+data.row.longitude+')</td>'+
'<td>'+data.row.pickupLocation+'</td>'+
'<td>'+data.row.hospitalName+'</td>'+
'<td>'+data.row.driverName+'</td>'+
'<td>'+data.row.emergencyStatus+'</td>';
//$('#tbIDOrder-'+data.row.emergencyOrderID).html('test');
//alert('#tbIDOrder-'+data.row.emergencyOrderID);
$('#tbIDOrder-'+data.row.emergencyOrderID).parent().replaceWith(newtr);
and this is my row:
<tr id="tbIDOrder-{{$o->EmergencyOrderID}}">
<td>{{ $o->CreatedDate }}</td>
<td>{{ $o->EmergencyOrderID }}</td>
<td>{{ $o->FirstName }} {{ $o->LastName }}</td>
<td>({{ $o->Latitude }}), ({{ $o->Longitude }})</td>
<td>{{ $o->PickupLocation }}</td>
<td>{{ $o->HospitalName}}</td>
<td>{{ $o->DriverName}}</td>
<td>{{ $o->EmergencyStatus }}</td>
</tr>
am i missing something? If it helps, im running this code with Pusher in Laravel :) thanks for your time.
EDIT:
I replaced the script to:
$('#tbIDOrder-'+data.row.emergencyOrderID).html(newtr);
but it still didnt work

As $('#tbIDOrder-'+data.row.emergencyOrderID) refers to TR, You can directly use .html(htmlString) to update the content.
$('#tbIDOrder-'+data.row.emergencyOrderID).html(newtr);
Here is an example
$('#tbIDOrder-1').html('<td>New Date</td>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tbIDOrder-1">
<td>CreatedDate</td>
</tr>
</table>

Creating Table in Angular JS, Data Doesn't Show

I am trying to create a simple table but can't seem to get the data to show. When I use {{ country.name }} the data shows, but when I try to add {{ country.1960 }} the whole table turns blank. Please let me know what I might be doing wrong. Any help is greatly appreciated.
Here is the HTML:
<body ng-app="myApp">
<h1>Country Population</h1>
<div ng-controller="oneController" >
<table>
<tr>
<th>Name</th>
<th>1960 Pop.</th>
<th>1970 Pop.</th>
<th>1980 Pop.</th>
<th>1990 Pop.</th>
<th>2000 Pop.</th>
</tr>
<tr ng-repeat="country in countries">
<td>{{ country.name }}</td>
<td>{{ country.1960 }}</td>
<td>{{ country.1970 }}</td>
<td>{{ country.1980 }}</td>
<td>{{ country.1990 }}</td>
<td>{{ country.2000 }}</td>
</tr>
</table>
</div>
</body>
Here is a sample of the script:
angular.module('myApp', [])
.controller('oneController', ['$scope', function($scope) {
$scope.countries = [{"name":"Aruba","code":"ABW","1960":54208,"1961":55435,"1962":56226,"1963":56697,"1964":57029,"1965":57360,"1966":57712,"1967":58049,"1968":58385,"1969":58724,"1970":59065,"1971":59438,"1972":59849,"1973":60239,"1974":60525,"1975":60655,"1976":60589,"1977":60366,"1978":60106,"1979":59978,"1980":60096,"1981":60567,"1982":61344,"1983":62204,"1984":62831,"1985":63028,"1986":62644,"1987":61835,"1988":61077,"1989":61032,"1990":62148,"1991":64623,"1992":68235,"1993":72498,"1994":76700,"1995":80326,"1996":83195,"1997":85447,"1998":87276,"1999":89004,"2000":90858,"2001":92894,"2002":94995,"2003":97015,"2004":98742,"2005":100031,"2006":100830,"2007":101219,"2008":101344,"2009":101418,"2010":101597,"2011":101932,"2012":102384},
{"name":"Andorra","code":"AND","1960":13414,"1961":14376,"1962":15376,"1963":16410,"1964":17470,"1965":18551,"1966":19646,"1967":20755,"1968":21888,"1969":23061,"1970":24279,"1971":25560,"1972":26892,"1973":28231,"1974":29514,"1975":30706,"1976":31781,"1977":32769,"1978":33746,"1979":34819,"1980":36063,"1981":37502,"1982":39112,"1983":40862,"1984":42704,"1985":44597,"1986":46515,"1987":48458,"1988":50431,"1989":52449,"1990":54511,"1991":56674,"1992":58904,"1993":61003,"1994":62707,"1995":63854,"1996":64274,"1997":64090,"1998":63799,"1999":64084,"2000":65399,"2001":68000,"2002":71639,"2003":75643,"2004":79060,"2005":81223,"2006":81877,"2007":81292,"2008":79969,"2009":78659,"2010":77907,"2011":77865,"2012":78360},
{"name":"Afghanistan","code":"AFG","1960":8774440,"1961":8953544,"1962":9141783,"1963":9339507,"1964":9547131,"1965":9765015,"1966":9990125,"1967":10221902,"1968":10465770,"1969":10729191,"1970":11015621,"1971":11323446,"1972":11644377,"1973":11966352,"1974":12273589,"1975":12551790,"1976":12806810,"1977":13034460,"1978":13199597,"1979":13257128,"1980":13180431,"1981":12963788,"1982":12634494,"1983":12241928,"1984":11854205,"1985":11528977,"1986":11262439,"1987":11063107,"1988":11013345,"1989":11215323,"1990":11731193,"1991":12612043,"1992":13811876,"1993":15175325,"1994":16485018,"1995":17586073,"1996":18415307,"1997":19021226,"1998":19496836,"1999":19987071,"2000":20595360,"2001":21347782,"2002":22202806,"2003":23116142,"2004":24018682,"2005":24860855,"2006":25631282,"2007":26349243,"2008":27032197,"2009":27708187,"2010":28397812,"2011":29105480,"2012":29824536},
{"name":"Angola","code":"AGO","1960":4965988,"1961":5056688,"1962":5150076,"1963":5245015,"1964":5339893,"1965":5433841,"1966":5526653,"1967":5619643,"1968":5715372,"1969":5817283,"1970":5928087,"1971":6049214,"1972":6180863,"1973":6323057,"1974":6475333,"1975":6637628,"1976":6808733,"1977":6989550,"1978":7184444,"1979":7399204,"1980":7637141,"1981":7901870,"1982":8190093,"1983":8489864,"1984":8784753,"1985":9063646,"1986":9320678,"1987":9561022,"1988":9798055,"1989":10051133,"1990":10333844,"1991":10652727,"1992":11002758,"1993":11372156,"1994":11743432,"1995":12104952,"1996":12451945,"1997":12791388,"1998":13137542,"1999":13510616,"2000":13924930,"2001":14385283,"2002":14886574,"2003":15421075,"2004":15976715,"2005":16544376,"2006":17122409,"2007":17712824,"2008":18314441,"2009":18926650,"2010":19549124,"2011":20180490,"2012":20820525},
{"name":"Albania","code":"ALB","1960":1618829,"1961":1668531,"1962":1719181,"1963":1770530,"1964":1822299,"1965":1874302,"1966":1926382,"1967":1978582,"1968":2031167,"1969":2084532,"1970":2138966,"1971":2194588,"1972":2251320,"1973":2309029,"1974":2367499,"1975":2426592,"1976":2486256,"1977":2546617,"1978":2607936,"1979":2670572,"1980":2734776,"1981":2799345,"1982":2863902,"1983":2930351,"1984":3001325,"1985":3077930,"1986":3162225,"1987":3251512,"1988":3336434,"1989":3404408,"1990":3446882,"1991":3459763,"1992":3446858,"1993":3417280,"1994":3384367,"1995":3357858,"1996":3341043,"1997":3331317,"1998":3325456,"1999":3317941,"2000":3304948,"2001":3286084,"2002":3263596,"2003":3239385,"2004":3216197,"2005":3196130,"2006":3179573,"2007":3166222,"2008":3156608,"2009":3151185,"2010":3150143,"2011":3153883,"2012":3162083},
{"name":"Arab World","code":"ARB","1960":93485943,"1961":96058179,"1962":98728995,"1963":101496308,"1964":104359772,"1965":107318159,"1966":110379639,"1967":113543760,"1968":116787194,"1969":120078092,"1970":123400916,"1971":126726106,"1972":130095625,"1973":133592409,"1974":137327448,"1975":141376124,"1976":145768518,"1977":150474227,"1978":155422735,"1979":160508834,"1980":165653287,"1981":170835489,"1982":176068130,"1983":181346070,"1984":186631963,"1985":192047001,"1986":197522280,"1987":202985205,"1988":208460437,"1989":213911862,"1990":221488293,"1991":227470711,"1992":231443007,"1993":237418436,"1994":243271554,"1995":250504422,"1996":255932514,"1997":261260242,"1998":266537558,"1999":271912978,"2000":277561423,"2001":283493089,"2002":289680968,"2003":296095945,"2004":302824676,"2005":309824383,"2006":317125787,"2007":324693498,"2008":332424892,"2009":340149038,"2010":347737036,"2011":355137048,"2012":362466629},
{"name":"United Arab Emirates","code":"ARE","1960":89608,"1961":97727,"1962":108774,"1963":121574,"1964":134411,"1965":146341,"1966":156890,"1967":167360,"1968":180762,"1969":201157,"1970":231529,"1971":272211,"1972":322439,"1973":382599,"1974":452848,"1975":532742,"1976":623450,"1977":723617,"1978":827191,"1979":926112,"1980":1014825,"1981":1090660,"1982":1155765,"1983":1215380,"1984":1277300,"1985":1347218,"1986":1426915,"1987":1514798,"1988":1609170,"1989":1707085,"1990":1806498,"1991":1908002,"1992":2012977,"1993":2121143,"1994":2232159,"1995":2346305,"1996":2470810,"1997":2608993,"1998":2753498,"1999":2893648,"2000":3026352,"2001":3132104,"2002":3223969,"2003":3369254,"2004":3658658,"2005":4148883,"2006":4875639,"2007":5797347,"2008":6798635,"2009":7718319,"2010":8441537,"2011":8925096,"2012":9205651},
{"name":"Argentina","code":"ARG","1960":20623998,"1961":20959241,"1962":21295290,"1963":21630854,"1964":21963952,"1965":22293817,"1966":22618887,"1967":22941477,"1968":23269302,"1969":23612675,"1970":23978532,"1971":24370660,"1972":24785830,"1973":25215328,"1974":25646533,"1975":26070443,"1976":26483835,"1977":26889764,"1978":27293093,"1979":27701412,"1980":28120135,"1981":28550123,"1982":28989069,"1983":29435404,"1984":29886564,"1985":30340419,"1986":30796481,"1987":31254574,"1988":31713147,"1989":32170407,"1990":32624874,"1991":33075194,"1992":33520803,"1993":33961947,"1994":34399343,"1995":34833168,"1996":35264070,"1997":35690778,"1998":36109342,"1999":36514558,"2000":36903067,"2001":37273361,"2002":37627545,"2003":37970411,"2004":38308779,"2005":38647854,"2006":38988923,"2007":39331357,"2008":39676083,"2009":40023641,"2010":40374224,"2011":40728738,"2012":41086927},
}]);

You need to use bracket notation for accessing numeric property name values (which is invalid identifier) and not dot notation. i.e
<td>{{ country.name }}</td>
<td>{{ country[1960] }}</td>
<td>{{ country[1970] }}</td>
<td>{{ country[1980] }}</td>
<td>{{ country[1990] }}</td>
<td>{{ country[2000] }}</td>
dot notation - property must be a valid JavaScript identifier, i.e. a sequence of alphanumerical characters, also including the underscore ("_") and dollar sign ("$"), that cannot start with a number.

try country["1960"]. i think this is the way

AngularJS ng-click change color within ng-repeat

I have some code that lists out items in a table from a database. The click function toggles the cells between green and red
<div class="row">
<div class="logs-table col-xs-12">
<table class="table table-bordered table-hover" style="width:100%">
<tr>
<th>Name</th>
<th>Seed</th>
<th>Division</th>
</tr>
<tr ng-repeat="team in Pool">
<td ng-class="{'btn-danger': started, 'btn-success': !started}" ng-click="inc()">{{ team.chrTeamName }}</td>
<td>{{ team.intSeed }}</td>
<td>{{ team.chrDivision }}</td>
</tr>
</table>
</div>
</div>
My click function is below
$scope.inc = function () { $scope.started = !$scope.started }
The only problem is that this is changing all of the cells in the first column. I'm thinking i need to pass a parameter in my click function, but I'm not sure what.

If you don't use the started value in your controller, you don't really need to define a function.
You could use ng-init to initialize an array keeping track of the started value for each team.
Something like this:
<tr ng-repeat="team in Pool" ng-init="started = []">
<td ng-class="{'btn-danger': started[$index], 'btn-success': !started[$index]}" ng-click="started[$index] = !started[$index]">{{ team.chrTeamName }}</td>
<td>{{ team.intSeed }}</td>
<td>{{ team.chrDivision }}</td>
</tr>
Somehow cleaner would be if there was a started property on every team instance:
<tr ng-repeat="team in Pool">
<td ng-class="{'btn-danger': team.started, 'btn-success': !team.started}" ng-click="team.started = !team.started">{{ team.chrTeamName }}</td>
<td>{{ team.intSeed }}</td>
<td>{{ team.chrDivision }}</td>
</tr>

Yes, passing a parameter into your function will help. Currently you have a $scope level variable ($scope.started) which selects your css ng-class. You probably want a team-by-team property. To do this, you should refer to the actual team object from within your ng-repeat.
<tr ng-repeat="team in Pool">
<td ng-class="{'btn-danger': started, 'btn-success': !team.started}" ng-click="inc(team)">{{ team.chrTeamName }}</td>
<td>{{ team.intSeed }}</td>
<td>{{ team.chrDivision }}</td>
</tr>
And in your javascript:
$scope.inc = function (team) { team.started = !team.started; }
Now that your are using the actual individual object (team) from your ng-repeat, everything should work fine.

How I pass an object as a parameter in a ng-click within a ng-repeat? AngularJS

How I pass an object as a parameter in a ng-click within a ng-repeat?
Example:
<tr data-ng-repeat="table in tables">
<td>{{ table.name }}</td>
<td>{{ isActive(table.active) }}</td>
<td>{{ table.initialDate }}</td>
<td>{{ table.finalDate }}</td>
<td>
<button data-ng-click="updateTable(table)">Update</button>
</td>
</tr>
Inside the ng-click updateTable(HERE), I want to pass my object table.
Can someone help me?

In your component.html edit your code as shown below :
<td><button (click)=updateTable(table)>Update</button></td></tr>
then in your typescript code just declare the function
updateTable(table){
console.log(table); //write your own code here!.
}

Categories

Resources