Develop Reference

I want to create a activate/deactive button in vue

This is my table. As you can see I have added a button to perform an action.
The action needs to change active to not active and not active to active upon clicking.
I cannot seem to find the SQL area that I could access which makes it difficult for me to update the database upon clicking. Any suggestions or help will be highly appreciated.
If there is any way to update the database upon clicking this button and then the new value should also appear in the datatable.
<table class="table" id="myTable">
<thead>
<tr>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="product in filteredProducts" :key="product.id">
<td>{{ product.status }}</td>
<td>
<div class="btn-group" role="group">
<button class="btn btn-secondary" #click="acdcProduct(product.id)">Active/Deactive</button>
</div>
</td>
</tr>
</tbody>
</table>
Here is what I have tried to do so far. Sorry I am new to vue.js
acdcProduct(id) {
this.axios
.acdc(`http://localhost:8000/api/products/${id}`)
let i = this.products.map(data => data.id).indexOf(id);
this.products.status(i, active)
}

Example for vue side, you should also check if database update was succesfull :
new Vue({
el: '#demo',
data() {
return {
products: [
{id: 1, name: 'prod 1', status: false},
{id: 2, name: 'prod 2', status: false},
{id: 3, name: 'prod 3', status: false},
{id: 4, name: 'prod 4', status: false},
{id: 5, name: 'prod 5', status: false},
]
}
},
methods: {
acdcProduct(id) {
/*this.axios
.acdc(`http://localhost:8000/api/products/${id}`)*/
let i = this.products.map(data => data.id).indexOf(id);
this.products[i].status = !this.products[i].status
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<table class="table" id="myTable">
<thead>
<tr>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="product in products" :key="product.id">
<td>{{ product.status ? 'active' : 'deactive' }}</td>
<td>
<div class="btn-group" role="group">
<button class="btn btn-secondary"
#click="acdcProduct(product.id)"
>
Active/Deactive
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>

let filteredProducts is an array in first time it has all data of product and after update product data you have a array of update products in response and again update the filteredProducts array with new updated data.
let filteredProducts = [];
acdcProduct(id) {
axios({
method: "PUT",
url: `http://localhost:8000/api/products/${id}`,
}).then((res) => {
filteredProducts = res.data
});
}

ERROR TypeError: Cannot read property 'name' of undefined when i try to add product

I try to make a basket as simply as possible, I try to add a product to my basket but I have an error but I cannot find my error.
thank you
html
<h2>Product</h2>
<div class="card" *ngFor="let product of productList">
<h1>{{product.name}}</h1>
<p class="price">{{product.price | currency: 'USD'}}</p>
<p><button (click)=add()>Add to Cart</button></p>
</div>
</div>
<div>
<h2>Total</h2>
<div class="card">
<table>
<thead>
<tr>
<th>product</th>
<th>price</th>
<th>Quantity</th>
<th>total</th>
</tr>
</thead>
<tbody *ngFor="let added of productArray">
<tr>
<td>{{added.name}}</td>
<td>{{added.price}}</td>
<td>x 10</td>
<td>45€</td>
ts.file
productList = [
{ name: 'Louis Vuis', price: 10 },
{ name: 'shubert helmet', price: 20 },
{ name: 'sport gloves', price: 30 }
];
productArray: any = [];
add(product) {
this.productArray.push(product);
}

In your template, you have to change (click)="add()" to (click)="add(product)"

Put Different Data Types in a Dynamic List

I'm creating a table that dynamically adds rows, and I would like to put the input type I've already got on the server (if it's int, bool string etc) but I'd like to know how to do the field accept combobox etc
code in cshtml
<tr ng-repeat="x in myArrayData(her comes the data type)">
<td>{{$index+1}}</td> <th scope="x" ng-repeat="(keycol, valcol) in x">
<input style="width: 100%;padding: 1px 10px; margin: 8px 0; box-sizing: border-box; "
ng-model="x[keycol]"
ng-keyup="$event.which == 13 ? search() : null"
type=" this type changes">
</th>
</tr>

One way of doing this is to have a switch on the type of the field to change between different editors for different data types.
For example, assuming your model looks like this:
$scope.data = [
{name: "Joe", type: 'A', register: 20, birthDate: new Date('2000-08-13')},
{name: "Jeff", type: 'A', register: 20, birthDate: new Date('2000-08-13')},
{name: "Jimmy", type: 'B', register: 20, birthDate: new Date('2000-08-13')},
]
$scope.dataType = {
name: {type:'text'},
type: {type: 'enum', options: ['A', 'B']},
register: {type:'number'},
birthDate: {type:'date'}
};
You can create your template like bellow:
<tr ng-repeat="item in data">
<td>{{$index+1}}</td>
<td ng-repeat="(keycol, valcol) in dataType">
<div ng-switch="valcol.type">
<div ng-switch-when="enum">
<select
ng-model="item[keycol]"
ng-options="option as option for option in valcol.options">
</select>
</div>
<div ng-switch-default>
<input ng-model="item[keycol]" type="{{valcol.type}}">
</div>
</div>
</td>
</tr>
Even better, would be creating an editor component/directive to encapsulate the behavior, producing a different editor for the type metadata of each column, therefore making your life easier in case you want to reuse it somewhere else.
For example:
<tr ng-repeat="item in data">
<td ng-repeat="(keycol, valcol) in dataType">
<editor ng-model="item[keycol]" type="valcol"></editor>
</td>
</tr>
The snippet bellow implements a simple example of the problem using the solution described on this answer.
angular.module('app', [])
.controller('main', function ($scope) {
$scope.data = [
{name: "Joe", type: 'A', register: 20, birthDate: new Date('2000-08-13')},
{name: "Jeff", type: 'A', register: 20, birthDate: new Date('2000-08-13')},
{name: "Jimmy", type: 'B', register: 20, birthDate: new Date('2000-08-13')},
]
$scope.dataType = {
name: {type:'text'},
type: {type: 'enum', options: ['A', 'B']},
register: {type:'number'},
birthDate: {type:'date'}
};
})
* {
box-sizing: border-box;
}
input,
select {
width: 100%;
padding: 1px 10px;
margin: 8px 0;
box-sizing: border-box;
border: none;
}
table {
border-collapse: collapse;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
<div ng-app="app" ng-controller="main">
<table border=1>
<thead>
<tr>
<th>#</th>
<th ng-repeat="(keycol, valcol) in dataType">
{{keycol}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{$index+1}}</td>
<td ng-repeat="(keycol, valcol) in dataType">
<div ng-switch="valcol.type">
<div ng-switch-when="enum">
<select
ng-model="item[keycol]"
ng-options="option as option for option in valcol.options">
</select>
</div>
<div ng-switch-default>
<input ng-model="item[keycol]" type="{{valcol.type}}">
</div>
</div>
</td>
</tr>
</tbody>
</table>
<pre>{{ data | json }}</pre>
</div>

How to use submit button to search the record in a table?

Here is my index.html page
------index.html-------
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6"
src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="PeopleCtrl"> <input type="text"
name="search1" >
<input type="submit" ng-model="search1" value="search"
ng-click="checkAll"> <table border="1" ng-init="ageToShow=(people|
underTwenty: 20).length >= 1">
<tr name="search1" > <th>Id</th> <th>Name</th> <th ng-show="ageToShow"
ng-if="!ageToShow">Age</th> </tr> <tr ng-repeat="person in
people|filter: search" ng-show="person.age>20" >
<td><span>{{person.id}}</span> </td> <td><span>{{person.name}}</span>
</td> <td ng-show="!ageToShow"><span>{{person.age}}</span> </td> </tr>
</table>
</div> </body> </html>
What i need is to use submit button to search the record .... And here is my script.js file...
--------script.js--------
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('PeopleCtrl', function($scope,$filter) {
$scope.people = ([{
id: 1,
name: "Peter",
age: 22 }, {
id: 2,
name: "David",
age: 12 }, {
id: 3,
name: "Anil",
age: 32 }, {
id: 4,
name: "Chean",
age: 22 }, {
id: 5,
name: "Niladri",
age: 18 }
]);
$scope.people3 = $scope.people;
$scope.$watch('search1', function(val)
{
$scope.people = $filter('filter')($scope.people3, val);
});
}); myApp.filter('underTwenty', function() {
return function(values, limit) {
var returnValue = [];
angular.forEach(values, function(val, ind) {
if (val.age < limit)
returnValue.push(val);
}); return returnValue; }; });
And here goes my coding in plunker: http://plnkr.co/edit/?p=preview

Only for filtering if you are planning to do submit the form, then I'll suggest you to don't prefer form submit.
Form getting the same requirement done I'd create one dummy field for search text-box & then I'd assign that would to search model which we using for filter on click of search ng-click="search = search1"
HTML
<input type="text" name="search1" ng-model="search1"/>
<input type="button" value="search" ng-click="search = search1">
<table border="1" ng-init="ageToShow=(people| underTwenty: 20).length >= 1">
<tr name="search1">
<th>Id</th>
<th>Name</th>
<th ng-show="ageToShow" ng-if="!ageToShow">Age</th>
</tr>
<tr ng-repeat="person in people|filter: search" ng-show="person.age>20">
<td><span>{{person.id}}</span>
</td>
<td><span>{{person.name}}</span>
</td>
<td ng-show="!ageToShow"><span>{{person.age}}</span>
</td>
</tr>
</table>
& Do remove the watch from search1 variable. So the filtering will not occur on change of search1
Working Plunkr

Differentiating current textbox value from old one and showing in Angular JS

My code is like this
<body>
<div>
<table ng-app='myApp' ng-controller="MainCtrl">
<thead></thead>
<tbody ng-repeat="prdElement in palletElement track by $index">
<tr>
<td>{{prdElement.name}}</td>
</tr>
<tr ng-repeat="data in prdElement.Data">
<td>{{data.itemId}}</td>
<td>{{data.shipmentId}}</td>
<td>{{data.itemCode}}</td>
<td>{{data.description}}</td>
<td>{{data.handlingUnit}}</td>
<td>{{data.weight}}</td>
<td>{{data.class}}</td>
<td>{{data.lenght}}</td>
<td>{{data.width}}</td>
<td>{{data.height}}</td>
<td>{{data.flag}}</td>
<td>
<input type="text" ng-model="data.quantity" placeholder=" Code" required />
</td>
</tr>
<tr>
<td>
<button ng-click="newPalletItem( prdElement,$event)">Submit</button>
</td>
</tr>
<!--<tr id="displayitems" >
<td>
{{palletElement}}
</td>
</tr>-->
</tbody>
</table>
</div>
(function () {
angular.module('myApp', []).controller('MainCtrl', function ($scope) {
var counter = 0;
$scope.palletElement = [{
name: 'Pallet 1',
Data: [{
name: 'item 1',
itemId: '284307',
shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
itemCode: '',
description: 'Bicycle parts - frame',
quantity: '31',
handlingUnit: 'CTN',
weight: '613.04',
class: '',
lenght: '102',
width: '42',
height: '61',
flag: 'P'
}, {
name: 'item 2',
itemId: '284308',
shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
itemCode: '',
description: 'Bicycle parts - fork',
quantity: '22',
handlingUnit: 'CTN',
weight: '242.99',
class: '',
lenght: '75',
width: '34',
height: '18',
flag: 'P'
}]
}]
$scope.newPalletItem = function (palletElement, $event) {
counter++;
$scope.palletElement.push(palletElement);
}
});
}());
When some one changes the value in last column textbox and press submit button I want to calculate [preloded value in textbox - (minus) current value in that text box ] and show it in next row. So far I have managed to duplicate the entire data completely to next row. but have no Idea in how to achieve rest. Can any one pint out a solution.
Fiddle
More details from Fiddle: as you can see current value is first text box is 31 if some one changes it to 10 when I duplicate the row to bottom I want that new textbox value to be shown as 21 (which is 31-10).

Please see here: http://jsfiddle.net/8r8cxcup/
newPalletImte:
$scope.newPalletItem = function (palletElement, $event) {
var npalletElement = {};
angular.copy(palletElement, npalletElement);
counter++;
angular.forEach(npalletElement.Data, function (row) {
if (row.quantity != row.newquantity) {
row.quantity = row.quantity - row.newquantity;
}
});
$scope.palletElement.push(npalletElement);
};
});
HTML:
<table ng-app='myApp' ng-controller="MainCtrl">
<thead></thead>
<tbody ng-repeat="prdElement in palletElement track by $index">
<tr>
<td>{{prdElement.name}}</td>
</tr>
<tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity = data.quantity">
<td>{{data.itemId}}</td>
<td>{{data.shipmentId}}</td>
<td>{{data.itemCode}}</td>
<td>{{data.description}}</td>
<td>{{data.handlingUnit}}</td>
<td>{{data.weight}}</td>
<td>{{data.class}}</td>
<td>{{data.lenght}}</td>
<td>{{data.width}}</td>
<td>{{data.height}}</td>
<td>{{data.flag}}</td>
<td>
<input type="text" ng-model="data.newquantity" placeholder=" Code" required />
</td>
</tr>
<tr>
<td>
<button ng-click="newPalletItem( prdElement,$event)">Submit</button>
</td>
</tr>
<!--<tr id="displayitems">
<td>
{{palletElement}}
</td>
</tr>-->
</tbody>
</table>