I am creating a restaurant menu app that a waiter can use to input orders.
I have everything set to where when I select an food item button. That item is added to a list of chosen items for purchase in a list displayed on screen.
I have remove buttons next to each item in case you want to remove one. The remove button works, however it always removes the first item from the list and not the item that had it's particular remove button selected.
I'm not sure why it is doing this. What could I do to get the current item removed that had it's particular remove button selected?
Js code
.controller('orderAddCtrl', ['$scope', '$location', 'dataService', function ($scope, $location, dataService) {
$scope.chosenItems = [];
$scope.totalItemPrices = 0;
$scope.userId = "";
$scope.addOrderToList = function (item) {
$scope.addPricesToTotalItemPrices(item.itemPrice);
$scope.chosenItems.push({'Name': item.itemName, 'Price': item.itemPrice});
};
$scope.addPricesToTotalItemPrices = function (price) {
$scope.totalItemPrices += price ;
};
$scope.removePricesFromTotalItemPrices = function (price) {
$scope.totalItemPrices -= price;
};
$scope.removeFromOrderToList = function (item) {
$scope.removePricesFromTotalItemPrices(item.Price);
$scope.chosenItems.splice(item, 1);
};
Html
<div class="row">
<div class="col-6">
<h2>Food Items</h2>
<div class="row">
<button class="btn btn-success col-3" ng-repeat="item in Items" ng-click="addOrderToList(item)">{{item.itemName}}</button>
</div>
</div>
<div class="col-6">
<table class="table table-bordered">
<thead>
<tr>
<th>Item Name</th>
<th>Item Price</th>
<th>Total Price: ${{totalItemPrices}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in chosenItems">
<td>{{i.Name}}</td>
<td>{{i.Price}}</td>
<td>
<button class="btn btn-danger" ng-click="removeFromOrderToList(i)">
Remove
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
This is the splice syntax:
array.splice(startindex, howmany, item1, ....., itemX)
https://www.w3schools.com/jsref/jsref_splice.asp
If you pass a string as a parameter where an integer is expected it will, in the case of splice, first attempt to parse the string as an integer.
When the parse returns NaN it will default to 0, which explains the behavior of your code.
Related
I need to open modal window with selected data from cell of table. Now the modal is opened with data but data in modal belong to all row. I need to chose data from item selected cell. I have a two arrays. One in other. I can selected item from first array (dataTable) but there is exist another array (item.arrValues) in the there. I can't to get the selected data from a second array. How can I to display the data from selected cell?
Example here Plnkr
HTML
<table>
<tbody>
<tr>
<td></td>
<td ng-repeat="i in vm.dataTable[0].arrValues">{{i.DAY}}</td>
</tr>
<tr ng-repeat="item in vm.dataTable">
<td>{{item.time}}</td>
<td ng-click="vm.openEvents(item);" ng-repeat="i in item.arrValues">{{i.Value}}</td>
</tr>
</tbody>
</table>
modalContent.html
<div>
<div class="modal-body" style="overflow: hidden;">
<div ng-bind="selected.item.Country"></div>
<!--<div ng-bind="selected.item.arrValues[0].Value"></div>-->
<div ng-repeat="i in selected.item.arrValues">{{i.Value}}</div>
</div>
</div>
JS
vm.openEvents = function(item){
var modalInstance = $modal.open({
scope: $scope,//
templateUrl: "modalContent.html",
controller: ModalInstanceCtrl,
resolve: {
item: function() {
return item;
},
dataTable: function ($timeout) {
return vm.dataTable
}
}
});
}
var ModalInstanceCtrl = function ($scope, dataTable, item) {
var vm = this;
vm.dataTable = dataTable;
$scope.selected = {
item: item
};
}
Change <td> to pass i to the function (i being the value in the cell in this case):
<td ng-click="vm.openEvents(i);" ng-repeat="i in item.arrValues">{{i.Value}}</td>
Change the modal template to display selected.item.DAY and selected.item.Value.
<div>
<div class="modal-body" style="overflow: hidden;">
<div ng-bind="selected.item.DAY"></div>
<div ng-bind="selected.item.Value"></div>
</div>
</div>
Working PLNKR here.
I am trying to add the rows dynamically for one of the variables which is of type String array in my db. But it only saves the last value entered in the row rather than saving all of them in an array. Below is my view code:
<div class="row" ng-class='{red:true}'>
<label for="remedy">Remedy</label>
</div>
<input name="remedy" id="remedy" ng-model="error.remedy" required>
<br/>
<div class="row" ng-class='{red:true}'>
<a href="#!/errorcreate" class="btn btn-primary btn-small" ng-click="addRemedyRow()" ng-class='{red:true}'>Add Row</a></div>
<br/>
<table style="width:100%">
<thead>
<tr>
<th ng-class='{red:true}'>Remedy</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rowContent in remedyrows">
<td>{{rowContent.remedy}}</td>
</tr>
</tbody>
</table>
{{error.remedy}}
<button type="submit" class="btn btn-default">Create</button>
Cancel
And this is the code in javascript:
$scope.remedyrows = [];
$scope.addRemedyRow = function() {
$scope.remedyrows.push({
remedy: $scope.error.remedy
});
Below is the output I am receiving (in a screenshot):
I added dsdfg as second row and my final error.remedy value just shows dsdfg rather than showing an array of both values : [wdssdsd,dsdfg]. error is the main document of which remedy is one of the fields of type String array.
Any ideas on how to achieve this?
Instead of error.remedy, which is used as holder for future remedyrow, use intermediate variable output for displaying results and sending them to the server:
Javascript:
$scope.output = $scope.remedyrows.map(function(x) { return x.remedy; });
$http({data: $scope.output, method: 'POST', url: url});
HTML:
{{output | json}}
you could have achieved it by following way:
$scope.remedyrows = [];
$scope.output;
$scope.addRemedyRow = function() {
$scope.remedyrows.push({
remedy: $scope.error.remedy
});
$scope.output = $scope.remedyrows.toString();
}
and in html
{{output}}
I am trying to learn AngularJS 1.6 and I am trying to populate a table with rows depending on the amount of rows selected in a dropdown list. It could be anywhere from 1 to 12. So far I have the following code.
<body ng-controller="myController">
<div>
<p>Blue Corner Boxer: </p> <input type="text" ng-model="nameBlue">
<br>
<p>Red Corner Boxer: </p> <input type="text" ng-model="nameRed">
<br>
<p>Number of Rounds:</p> <select ng-model="selectedRounds"><option ng-repeat="x in rounds">{{x}}</option></select>
</div>
<div>
<table class="table table-striped">
<thead>
<tr>
<th style="text-align:center">{{nameBlue}}</th>
<th style="text-align:center">Round</th>
<th style="text-align:center">{{nameRed}}</th>
</tr>
</thead>
<tbody class="tablerows">
<tr ng-repeat="x in selectedRounds">
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
<h2 style="text-align: center">Final Score: </h2> {{scoreBlue1 + ScoreBlue2}}
</div>
</body>
Then in the js file
//Create the module
var myApp = angular.module("myModule", []);
//Create the controller and register the module in one line
myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS tutorial";
$scope.score = [1,2,3,4,5,6,7,8,9,10];
$scope.rounds = [1,2,3,4,5,6,7,8,9,10,11,12];
});
So far the table will add 1 row on selection of anything 1 to 9, but 10 to 12 adds 2 rows. So I think I am wondering how to create an array length of size "selectedrounds" that will repeat rows with the repeater.
Thanks
If you need an array only for iterating and you don't worry about data in it. You can do something like this:
In your controller:
$scope.selectedRounds = 0;
$scope.getRoundsArray(){
return new Array($scope.selectedRounds);
}
We just create an array with needed length and with all elements are 'undefined'. If you create an array with 3 lenght you will get: ['undefined', 'undefined', 'undefined'].
In view:
<tr ng-repeat="x in getRoundsArray() track by $index">
You need this track by $index cause your array contains only 'undefined' values so to prevent angular arguing about duplicate keys we need to use track by.
I am trying to create a table based on the selection of a drop down list. The user would choose 1 to 12 and that number would be the amount of rows to create in the table. Here is my code so far
<body ng-controller="myController">
<div>
<p>Blue Corner Boxer: </p> <input type="text" ng-model="nameBlue">
<br>
<p>Red Corner Boxer: </p> <input type="text" ng-model="nameRed">
<br>
<p>Number of Rounds:</p> <select ng-model="selectedRounds"><option ng-repeat="x in rounds">{{x}}</option></select>
</div>
<div>
<table class="table table-striped">
<thead>
<tr>
<th style="text-align:center">{{nameBlue}}</th>
<th style="text-align:center">Round</th>
<th style="text-align:center">{{nameRed}}</th>
</tr>
</thead>
<tbody class="tablerows">
<tr ng-repeat="x in getRoundsArray(selectedRounds) track by $index">
<td><select ng-options="x for x in score"></select></td>
<td>Score</td>
<td><select ng-options="x for x in score"></select></td>
</tr>
</tbody>
</table>
var myApp = angular.module("myModule", []);
myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS tutorial";
$scope.score = [1,2,3,4,5,6,7,8,9,10];
$scope.rounds = [1,2,3,4,5,6,7,8,9,10,11,12];
$scope.selectedRounds = 0;
$scope.getRoundsArray = function(rounds){
return new Array(rounds);
}
});
No matter what number I choose in the drop down list it just adds 1 row to the table at a time for each selection I make. Instead I want 6 rows as soon as user selects 6.
You need to re-architect your code slightly.
The repeat needs to be over a scoped variable (tableArray in my example) that changes whenever the dropdown changes.
You also do need the $index in the track for it to work.
Here is a working plunker.
Your function
return new Array(rounds);
has changed to
$scope.tableArray = new Array( $scope.selectedRounds * 1);
$scope.getRoundsArray = function(rounds){
return new Array(rounds);
}
});
this does not do what you think it does. You are calling it as getRoundsArray(6), which creates an array with one entry, which is 6, and not, as you want, an array with six entries.
See, for example, https://www.w3schools.com/js/js_arrays.asp.
Thus, your
<tr ng-repeat="x in getRoundsArray(selectedRounds) track by $index">
repeats for each of the one entries of that array, giving the result that you describe.
(and you don't need that track by)
I have a table which contains some data about car makes.
It looks like this:
Now in the table appears data for all makes, but I need to show data only for the make that I've clicked. For example if I click on Audi to show data only for this make.
This is my view where I have populated the table:
<div class="row">
#{var testList = Model.ProductMatchingVehicles.GroupBy(p => p.Make.Name).ToList(); foreach (var item in testList) {
<div class="btn btn-danger btnMake" data-id="#item.Key" id=btnMake onclick="myFunction()">#item.Key</div>
} }
</div>
<div class="row">
<div class="col-xs-12">
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Engine</th>
<th>Data</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model.ProductMatchingVehicles != null) { foreach (var item in Model.ProductMatchingVehicles) {
<tr>
<td>#item.Make.Name</td>
<td>#item.Model.Name</td>
<td>#item.Engine.Name</td>
</tr>
} }
</tbody>
</table>
</div>
</div>
Can you please advise me how to achieve this in javascript or jquery? Thanks!
You can try with following code:
1) Modify <tbody> as follows:
<tbody>
#if (Model.ProductMatchingVehicles != null) { foreach (var item in Model.ProductMatchingVehicles) {
<tr class="vehicle_rows" data-refId="#item.Key">
<td>#item.Make.Name</td>
<td>#item.Model.Name</td>
<td>#item.Engine.Name</td>
</tr>
} }
</tbody>
Here we have added the class and data-refId attribute to each <tr>
2) Modify the button click function a bit:
<div class="btn btn-danger btnMake" data-id="#item.Key" id=btnMake onclick="myFunction(this)">#item.Key</div>
Here passing this reference to function
3) The function myFunction will have logic something like this:
function myFunction(obj){
var $button = $(obj);
var car_make = $button.data("id"); //reading the data-id of clicked button
//hide all rows first
$(".vehicle_rows").hide();
//show only currenly clicked buttons associated rows
$(".vehicle_rows[data-refId="+car_make+"]").show();
}