i am new to vue js, i have one "iban" entry that I want to do and when "add iban" button is clicked, first entry "delete" range should be added and when I want to delete it starts from above, I think I made a mistake. Thanks already for your help.
<template>
<div class="col-12" v-for="(section, index) in sections">
<div class="mb-1 row">
<div class="col-sm-3">
<label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" id="iban" v-model="section.item">
</div>
</div>
<div class="mb-1 row" v-for="(addition, index) in section.additionals">
<div class="col-sm-3">
<label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Item" v-model="addition.item">
<span class="float-right" style="cursor:pointer" #click="removeItem(index)">X</span>
</div>
</div>
<button class="btn btn-success mt-5 mb-5" #click="addNewItem(index)">New Iban</button>
</div>
</template>
<script>
export default {
data() {
return {
data: {
iban: "",
},
sections: [
{
item: '',
additionals: []
}
]
}
},
methods: {
addNewItem(id) {
this.sections[id].additionals.push({
item: ''
})
},
removeItem(index){
this.sections[index].additionals.splice(index,1)
},
},
}
</script>
Looking at your updated post & images, I think you are looking for the following:
new Vue({
el: "#app",
data() {
return {
data: {
iban: "",
},
sections: [{
ibans: [{item: ""}]
}]
}
},
methods: {
addNewItem(id) {
this.sections[id].ibans.push({item: ''});
},
removeItem(sectionIndex, ibanIndex) {
this.sections[sectionIndex].ibans.splice(ibanIndex, 1);
},
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<div class="col-12 sections" v-for="(section, sectionIndex) in sections">
<div class="mb-1 row" v-for="(iban, ibanIndex) in section.ibans">
<div class="col-sm-3">
<label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Item" v-model="iban.item">
<span v-if="section.ibans.length>1"
class="float-right" style="cursor:pointer" #click="removeItem(sectionIndex, ibanIndex)">X</span>
</div>
</div>
<button class="btn btn-success mt-5 mb-5" #click="addNewItem(sectionIndex)">New Iban</button>
</div>
</template>
</div>
I think this code could help you.
<template>
<div class="col-12">
<div
class="mb-1 row"
v-for="(item, index) in sections.additionals"
:key="index"
>
<div class="col-sm-3">
<label for="iban" class="col-form-label">
<span><i data-feather="file-text"></i></span>IBAN NUMBER
</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" id="iban" v-model="item.item" />
<span
class="float-right"
style="cursor: pointer"
#click="removeItem(index)"
>X</span
>
</div>
<button class="btn btn-success mt-5 mb-5" #click="addNewItem">
New Iban
</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: {
iban: "",
},
sections: { additionals: [{ item: "" }] },
};
},
methods: {
addNewItem() {
this.sections.additionals.push({
item: this.data.iban,
});
},
removeItem(index) {
this.sections.additionals.splice(index, 1);
},
},
};
</script>
Related
I'm trying to clear my validation for that particular group based on user input.I have tried like this but not work for me.
this.myForm = this.fb.group({
questions: this.fb.array([
this.fb.group({
question_name: ['', Validators.required],
type: ['', Validators.required],
point: ['', Validators.required],
no_of_answer: [''],
option: this.fb.array([]),
right_answer: ['', Validators.required],
}),
]),
});
this.type = [
{ name: 'Multiple choice choose one( radio)', type: 'radio' },
{ name: 'Multiple choice choose many', type: 'checkbox' },
{ name: 'True / False(radio)', type: 'radio' },
{
name: 'Fill in the blank single input',
type: 'singleInput',
},
{
name: 'Fill in the blank multiple choice',
type: 'multipleInput',
},
];
// when question type is selected
type_selected(comp) {
const value = comp.get('type').value;
switch (value) {
case 'radio':
const control = comp.controls['right_answer'] as FormControl;
control.clearValidators();
break;
case 'checkbox':
console.log('option required');
break;
case 'singleInput':
console.log('Answer Required');
break;
case 'multipleInput':
console.log('Multiple Answer Required');
break;
default:
console.log('');
}
}
component.html
<div class="container-fluid">
<div *ngIf="new_created; else existing">
<div class="container-fluid mt-3">
<form [formGroup]="myForm" (ngSubmit)="create_company_fun()">
<ng-container formArrayName="questions">
<div
class="row"
*ngFor="let comp of questionFormArr.controls; let i = index"
>
<p-divider align="center" class="mt-3">
<div class="p-d-inline-flex p-ai-center">
<i class="pi pi-question p-mr-2"></i>
<b>Question {{ i + 1 }} </b>
</div>
</p-divider>
<ng-container [formGroupName]="i">
<div class="col-12 col-md-9 mt-5">
<span class="p-float-label w-100">
<input
type="text"
id="inputtext"
class="form-control"
pInputText
formControlName="question_name"
/>
<label for="inputtext">Question Name</label>
</span>
</div>
<div class="col-12 col-md-3 mt-5 d-flex">
<div>
<button
pButton
pRipple
type="button"
icon="pi pi-plus"
(click)="addNewQuestion()"
class="p-button-rounded p-button-success"
></button>
</div>
<div style="margin-left: 1rem">
<button
pButton
pRipple
type="button"
icon="pi pi-minus"
(click)="deleteQuestion(i)"
class="p-button-rounded p-button-danger"
></button>
</div>
</div>
<div class="col-12 col-md-4 mt-5">
<span class="p-float-label w-100">
<input
type="text"
id="inputtext"
class="form-control"
pInputText
formControlName="point"
/>
<label for="inputtext">Points</label>
</span>
</div>
<div class="col-12 col-md-4 mt-5">
<span class="p-float-label w-100">
<p-dropdown
inputId="dropdown"
[autoDisplayFirst]="false"
[options]="type"
[style]="{ minWidth: '100%' }"
optionLabel="name"
optionValue="type"
formControlName="type"
(onChange)="type_selected(comp)"
></p-dropdown>
<label for="dropdown">Type</label>
</span>
</div>
<div
class="col-12 col-md-4 mt-5"
*ngIf="comp.get('type').value == 'multipleInput'"
>
<span class="p-float-label w-100">
<input
type="text"
id="inputtext"
class="form-control"
pInputText
formControlName="no_of_answer"
/>
<label for="inputtext">Number of Answer</label>
</span>
</div>
<ng-container
*ngIf="
comp.get('type').value == 'radio' ||
comp.get('type').value == 'checkbox'
"
>
<div class="col-12" formArrayName="option">
<div
class="row"
*ngFor="
let project of comp.get('option')['controls'];
let j = index
"
>
<div class="col-12 col-md-9 mt-5">
<span class="p-float-label w-100">
<input
type="text"
id="inputtext"
class="form-control"
pInputText
[formControlName]="j"
/>
<label for="inputtext">Option {{ j + 1 }} </label>
</span>
</div>
<div class="col-12 col-md-3 mt-5 d-flex">
<div>
<button
pButton
pRipple
type="button"
icon="pi pi-plus"
(click)="addNewOption(comp.get('option'))"
class="p-button-rounded p-button-success"
></button>
</div>
<div style="margin-left: 1rem">
<button
pButton
pRipple
type="button"
icon="pi pi-minus"
(click)="deleteOption(comp.get('option'), j)"
class="p-button-rounded p-button-danger"
></button>
</div>
</div>
</div>
</div>
</ng-container>
<div
class="col-12 col-md-9 mt-5"
*ngIf="comp.get('type').value !== 'multipleInput'"
>
<span class="p-float-label w-100">
<input
type="text"
id="inputtext"
class="form-control"
pInputText
formControlName="right_answer"
/>
<label for="inputtext">Right Answer</label>
</span>
</div>
<div class="col-12 col-md-3 mt-5">
<button class="btn btn-primary" [disabled]="myForm.invalid">
Create
</button>
</div>
</ng-container>
</div>
</ng-container>
</form>
</div>
</div>
<ng-template #existing>
<app-add-from-existing-question></app-add-from-existing-question>
</ng-template>
</div>
What I want is, If the user selected single-input I want to hide options and their validation.
All Works fine except validation. I'm unable to clear or set validation inside my formgroup
Thanks for the StackBlitz link, however, the details are incomplete there and is throwing an error. Please update the link for future purposes.
Straight from the docs, please try using updateValueAndValidity() which recalculates the value and validation status of the control. Call it on your control constant variable as- control.updateValueAndValidity();
Link: https://angular.io/api/forms/AbstractControl#updatevalueandvalidity
In my Vue.js frontend app I wanted to create form to POST json data to REST API. The form has one part where I GET json data from API which is list of possible to add groups.
Vue.js code looks like
<script>
export default {
data () {
return {
line: {
name: '',
buttons: [{
name: '',
state: false,
is_reported: '',
assignmentGroups: [{
name: ''
}]
}]
},
assignmentGroupsList: []
}
},
methods: {
addButton () {
this.line.buttons.push({
name: '',
state: false,
is_reported: ''
})
},
deleteButton (index) {
this.line.buttons.splice(index, 1)
},
saveLine () {
// this.$http.post('http://127.0.0.1:8001/api/line')
// .then(response => response.json())
// .then(result => this.lines = result)
console.log(JSON.stringify(this.line))
},
fetchAssignmentGroups() {
this.$http.get('http://127.0.0.1:8001/api/agroup')
.then(response => response.json())
.then(result => this.assignmentGroupsList = result)
.then(result => console.log(result))
}
},
created: function () {
this.fetchAssignmentGroups();
//this.fetchLines();
}
}
</script>
and template
<template>
<div>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<div class="form">
<div class="form-group">
<label for="name">Line name</label>
<input v-model="line.name" class="form-control" type="text" id="name" name="name"/>
</div>
<label for="">Buttons</label>
<div class="" v-for="(button, index ) in line.buttons">
<div class="form-group">
<label for="btn">Przycisk nr {{ index }}</label>
<input v-model="button.name" class="form-control col-lg-3" type="text" id="btn" name="btn" />
<input type="radio" id="'one' + index" :value="false" v-model="button.is_reported">
<label for="one">No</label>
<input type="radio" id="'two' + index" :value="true" v-model="button.is_reported">
<label for="two">Yes</label>
</div>
<div class="form-group">
<div class="" v-for="(agroup, index2) in assignmentGroupsList">
<input type="checkbox" :name="'agroup'+index2" :value=" agroup.name " v-model="button.assignmentGroups">
<label for="">{{ agroup.name }}</label>
</div>
</div>
<button class="btn btn-danger"
#click="deleteButton(index)">
Remove
</button>
</div>
<div class="form-group">
<button class="btn btn-success"
#click="addButton">
Add
</button>
<button class="btn btn-primary"
#click="saveLine">
Save
</button>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
</div>
</div>
</template>
In browser I can see correctly list of groups in every added button but its all. It doesn't get data.
I'm trying to clear my form every time I click publish:
$scope.product = {};
$scope.upload = function(user) {
var formData = new FormData;
$scope.product.owner = user;
for (key in $scope.product) {
formData.append(key, $scope.product[key]);
//console.log(key, ".........");
//console.log($scope.product[key]);
};
//getting the file
var file = $('#file')[0].files[0];
formData.append('image', file);
$http.post('http://localhost:3000/products', formData, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
}).then(function(res) {
$scope.item = res.data;
console.log($scope.item.image);
products.displayuserlist.push({
owner: $scope.product.owner,
car: $scope.product.newCar,
//seaters: 5,
price: $scope.product.newPrice,
//contact: 38880000,
area: $scope.product.businessArea,
image: $scope.item.image
});
$scope.product = null;
});
};
All the input fill has been clear except for
<form ng-submit="upload(currentUser())">
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Car</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Perodua Myvi" class="form-control" ng-model="product.newCar" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Price(RM) per day</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="80" class="form-control" ng-model="product.newPrice" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Business Area</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Universiti Malaysia Sabah" class="form-control" ng-model="product.businessArea" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Insert Car Image</label>
<br>
</div>
<div class="col-xs-5">
<!--<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Image
</button>-->
<input type="file" id="file" ng-model="product.postimage" />
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-5">
<button type="submit" class="btn btn-primary btn-sm pull-right">
<span class="glyphicon glyphicon-globe"></span> Publish
</button>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<br>
<br>
</form>
I have tried to use angular.element("input[type='file']").val(null); and $setPristine() but it does not work. How do I do this?
You can try this
$scope.product.postimage = null;
$('#file').val('');
I am using Vue.js to put together a simple CRUD app. I have a demo (followed a tutorial) working of it but for the life of me I don't understand how to sort the table columns by clicking on them. I have found a code example of how to do it but I do not understand how to integrate it. I would be so grateful for any help on how to do this.
demo so far: https://codepen.io/figaro/pen/XMWOyj
<div class="container">
<header class="page-header">
<div class="branding">
<img src="https://vuejs.org/images/logo.png" alt="Logo" title="Home page" class="logo"/>
<h1>Vue.js 2 CRUD application</h1>
<p>Ported from: Vue.js CRUD application</p>
</div>
</header>
<main id="app">
<router-view></router-view>
</main>
</div>
<template id="product-list">
<div>
<div class="actions">
<router-link class="btn btn-default" v-bind:to="{path: '/add-product'}">
<span class="glyphicon glyphicon-plus"></span>
Add product
</router-link>
</div>
<div class="filters row">
<div class="form-group col-sm-3">
<label for="search-element">Product name</label>
<input v-model="searchKey" class="form-control" id="search-element" requred/>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th class="col-sm-2">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="product in filteredProducts">
<td>
<router-link v-bind:to="{name: 'product', params: {product_id: product.id}}">{{ product.name }}</router-link>
</td>
<td>{{ product.description }}</td>
<td>
{{ product.price }}
<span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
</td>
<td>
<router-link class="btn btn-warning btn-xs" v-bind:to="{name: 'product-edit', params: {product_id: product.id}}">Edit</router-link>
<router-link class="btn btn-danger btn-xs" v-bind:to="{name: 'product-delete', params: {product_id: product.id}}">Delete</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<template id="add-product">
<div>
<h2>Add new product</h2>
<form v-on:submit="createProduct">
<div class="form-group">
<label for="add-name">Name</label>
<input class="form-control" id="add-name" v-model="product.name" required/>
</div>
<div class="form-group">
<label for="add-description">Description</label>
<textarea class="form-control" id="add-description" rows="10" v-model="product.description"></textarea>
</div>
<div class="form-group">
<label for="add-price">Price, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="form-control" id="add-price" v-model="product.price"/>
</div>
<button type="submit" class="btn btn-primary">Create</button>
<router-link class="btn btn-default" v-bind:to="'/'">Cancel</router-link>
</form>
</div>
</template>
<template id="product">
<div>
<h2>{{ product.name }}</h2>
<b>Description: </b>
<div>{{ product.description }}</div>
<b>Price:</b>
<div>{{ product.price }}<span class="glyphicon glyphicon-euro"></span></div>
<br/>
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
<router-link v-bind:to="'/'">Back to product list</router-link>
</div>
</template>
<template id="product-edit">
<div>
<h2>Edit product</h2>
<form v-on:submit="updateProduct">
<div class="form-group">
<label for="edit-name">Name</label>
<input class="form-control" id="edit-name" v-model="product.name" required/>
</div>
<div class="form-group">
<label for="edit-description">Description</label>
<textarea class="form-control" id="edit-description" rows="3" v-model="product.description"></textarea>
</div>
<div class="form-group">
<label for="edit-price">Price, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="form-control" id="edit-price" v-model="product.price"/>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<router-link class="btn btn-default" v-bind:to="'/'">Cancel</router-link>
</form>
</div>
</template>
<template id="product-delete">
<div>
<h2>Delete product {{ product.name }}</h2>
<form v-on:submit="deleteProduct">
<p>The action cannot be undone.</p>
<button type="submit" class="btn btn-danger">Delete</button>
<router-link class="btn btn-default" v-bind:to="'/'">Cancel</router-link>
</form>
</div>
</template>
<script>
var products = [
{id: 1, name: 'Angular', description: 'Superheroic JavaScript MVW Framework.', price: 100},
{id: 2, name: 'Ember', description: 'A framework for creating ambitious web applications.', price: 100},
{id: 3, name: 'React', description: 'A JavaScript Library for building user interfaces.', price: 100},
];
function findProduct (productId) {
return products[findProductKey(productId)];
};
function findProductKey (productId) {
for (var key = 0; key < products.length; key++) {
if (products[key].id == productId) {
return key;
}
}
};
var List = Vue.extend({
template: '#product-list',
data: function () {
return {products: products, searchKey: ''};
},
computed: {
filteredProducts: function () {
return this.products.filter(function (product) {
return this.searchKey=='' || product.name.indexOf(this.searchKey) !== -1;
},this);
}
}
});
var Product = Vue.extend({
template: '#product',
data: function () {
return {product: findProduct(this.$route.params.product_id)};
}
});
var ProductEdit = Vue.extend({
template: '#product-edit',
data: function () {
return {product: findProduct(this.$route.params.product_id)};
},
methods: {
updateProduct: function () {
var product = this.product;
products[findProductKey(product.id)] = {
id: product.id,
name: product.name,
description: product.description,
price: product.price
};
router.push('/');
}
}
});
var ProductDelete = Vue.extend({
template: '#product-delete',
data: function () {
return {product: findProduct(this.$route.params.product_id)};
},
methods: {
deleteProduct: function () {
products.splice(findProductKey(this.$route.params.product_id), 1);
router.push('/');
}
}
});
var AddProduct = Vue.extend({
template: '#add-product',
data: function () {
return {product: {name: '', description: '', price: ''}}
},
methods: {
createProduct: function() {
var product = this.product;
products.push({
id: Math.random().toString().split('.')[1],
name: product.name,
description: product.description,
price: product.price
});
router.push('/');
}
}
});
var router = new VueRouter({routes:[
{ path: '/', component: List},
{ path: '/product/:product_id', component: Product, name: 'product'},
{ path: '/add-product', component: AddProduct},
{ path: '/product/:product_id/edit', component: ProductEdit, name: 'product-edit'},
{ path: '/product/:product_id/delete', component: ProductDelete, name: 'product-delete'}
]});
app = new Vue({
router:router
}).$mount('#app')</script>
Working code sample:
<div class="container">
<header class="page-header">
<div class="branding">
<img src="https://vuejs.org/images/logo.png" alt="Logo" title="Home page" class="logo"/>
<h1>Vue.js 2 CRUD application</h1>
<p>Ported from: Vue.js CRUD application</p>
</div>
</header>
<main id="app">
<router-view></router-view>
</main>
</div>
<template id="product-list">
<div>
<div class="actions">
<router-link class="btn btn-default" v-bind:to="{path: '/add-product'}">
<span class="glyphicon glyphicon-plus"></span>
Add product
</router-link>
</div>
<div class="filters row">
<div class="form-group col-sm-3">
<label for="search-element">Product name</label>
<input v-model="searchKey" class="form-control" id="search-element" requred/>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th class="col-sm-2">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="product in filteredProducts">
<td>
<router-link v-bind:to="{name: 'product', params: {product_id: product.id}}">{{ product.name }}</router-link>
</td>
<td>{{ product.description }}</td>
<td>
{{ product.price }}
<span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
</td>
<td>
<router-link class="btn btn-warning btn-xs" v-bind:to="{name: 'product-edit', params: {product_id: product.id}}">Edit</router-link>
<router-link class="btn btn-danger btn-xs" v-bind:to="{name: 'product-delete', params: {product_id: product.id}}">Delete</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<template id="add-product">
<div>
<h2>Add new product</h2>
<form v-on:submit="createProduct">
<div class="form-group">
<label for="add-name">Name</label>
<input class="form-control" id="add-name" v-model="product.name" required/>
</div>
<div class="form-group">
<label for="add-description">Description</label>
<textarea class="form-control" id="add-description" rows="10" v-model="product.description"></textarea>
</div>
<div class="form-group">
<label for="add-price">Price, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="form-control" id="add-price" v-model="product.price"/>
</div>
<button type="submit" class="btn btn-primary">Create</button>
<router-link class="btn btn-default" v-bind:to="'/'">Cancel</router-link>
</form>
</div>
</template>
<template id="product">
<div>
<h2>{{ product.name }}</h2>
<b>Description: </b>
<div>{{ product.description }}</div>
<b>Price:</b>
<div>{{ product.price }}<span class="glyphicon glyphicon-euro"></span></div>
<br/>
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
<router-link v-bind:to="'/'">Back to product list</router-link>
</div>
</template>
<template id="product-edit">
<div>
<h2>Edit product</h2>
<form v-on:submit="updateProduct">
<div class="form-group">
<label for="edit-name">Name</label>
<input class="form-control" id="edit-name" v-model="product.name" required/>
</div>
<div class="form-group">
<label for="edit-description">Description</label>
<textarea class="form-control" id="edit-description" rows="3" v-model="product.description"></textarea>
</div>
<div class="form-group">
<label for="edit-price">Price, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="form-control" id="edit-price" v-model="product.price"/>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<router-link class="btn btn-default" v-bind:to="'/'">Cancel</router-link>
</form>
</div>
</template>
<template id="product-delete">
<div>
<h2>Delete product {{ product.name }}</h2>
<form v-on:submit="deleteProduct">
<p>The action cannot be undone.</p>
<button type="submit" class="btn btn-danger">Delete</button>
<router-link class="btn btn-default" v-bind:to="'/'">Cancel</router-link>
</form>
</div>
</template>
<script>var vm = new Vue({
el: '#demo',
data: {
sections: [
{
id: 1,
city: 'Dallas',
state: 'TX',
zip: 75201,
price: 162500
}, {
id: 2,
city: 'Bevery Hills',
state: 'CA',
zip: 90210,
price: 319250
}, {
id: 3,
city: 'New York',
state: 'NY',
zip: 00010,
price: 962500
}
],
columns: {
city : {
displayname : "City",
sortorder : 1
},
zip : {
displayname : "Zip",
sortorder : 1
},
price : {
displayname : "Price ($)",
sortorder : 1
}
},
query: '',
sortkey: 'city',
sortOrders: {
city: 1,
zip: 1,
price: -1
}
},
computed: {
tableFilter: function () {
return this.orderBy(this.findBy(this.sections, this.query, 'city'),this.sortOrders[this.sortkey], this.sortkey)
}
},
methods: {
findBy: function (list, value, column) {
return list.filter(function (item) {
return item[column].includes(value)
})
},
orderBy: function (list, order, column) {
return list.sort(function (a, b) {
return order * (a[column] - b[column])
})
},
sort: function (colKey) {
this.sortkey = colKey
this.sortOrders[colKey] = this.sortOrders[colKey] * -1
}
}
})<script>
You need to add a v-on:click attribute to your <th>:
<th v-on:click="sortByColumn('name')">Name</th>
Then add a method that sets a variable for the column and update your computed property to use it:
data: function() {
return { products: products, searchKey: '', sortBy: '' };
},
computed: {
filteredProducts: function () {
return this.products.filter((product) => {
...
}).sort((a, b) => { return (a[this.sortBy] < b[this.sortBy]) ? -1 : 1; });
}
},
methods: {
sortByColumn: function(columnName) {
this.sortBy = columnName;
}
}
I updated your code example here, and also added in toggling between ascending and descending order. https://codepen.io/anon/pen/vxYMLE
I am trying to show text based on each of the input's in my form having a value entered or a box ticked.
I can't seem to figure out how to get this to work for all the input fields.
Any ideas?
<div class="container" ng-app ng-controller="OrderFormController">
<div class="row form-group">
<div class="well">
<label for="description" class="col-sm-3 control-label">Extinguisher Status</label>
<div ng-if="myForm.inputs != null">show something</div>
<div class="input-group"></div>
</div>
</div>
<form name="myForm">
<div class="row form-group" ng-repeat="input in inputs">
<div class="well">
<label for="description" class="col-sm-3 control-label">{{input.name}}</label>
<div class="input-group">
<input type="text" class="form-control" required placeholder="Enter {{input.name}}" ng-model="entered">
<!-- <span type="button" class="glyphicon glyphicon-ok" ng-if="input.name==' Geo Location:'"></span> -->
<span ng-class="{'input-group-addon danger' : !entered, 'input-group-addon success': entered}" ng-init="isActive = false">
<span ng-class="{'glyphicon glyphicon-remove': !entered, 'glyphicon glyphicon-ok': entered}" ng-init="isActive = false">
</span>
</span>
</div>
</div>
</div>
<div class="row form-group" ng-repeat="check in checks">
<div class="well">
<label for="description" class="col-sm-3 control-label">{{check.name}}</label>
<div class="btn-group" data-toggle="buttons">
<label ng-class="{'btn btn-danger': !isActive, 'btn btn-success': isActive}" ng-init="isActive = false" ng-click="isActive = !isActive">
<input type="checkbox" autocomplete="off" required ng-model="entered"> <span ng-class="{'glyphicon glyphicon-remove': !isActive, 'glyphicon glyphicon-ok': isActive}" ng-init="isActive = false" ng-click="isActive = !isActive">
</span>
</label>
</div>
</div>
</div>
</form>
</div>
Controller:
function OrderFormController($scope) {
$scope.inputs = [{
name: 'Fire Extinguisher Number:',
id: 1,
active: false
}, {
name: 'Extinguisher Location:',
id: 2,
active: false
}, {
name: 'Geo Location:',
id: 3,
active: false
}];
$scope.checks = [{
name: 'Visual Inspection:',
id: 4,
active: false
}, {
name: 'Weight:',
id: 5,
active: false
}, {
name: 'Gague:',
id: 6,
active: false
}, {
name: 'Hose:',
id: 7,
active: false
}, {
name: 'Service Complete:',
id: 8,
active: false
}];
}
The best what you can do, is to bind input fields and checkboxes to properties of the objects $scope.inputs and $scope.checks respectively. Like this:
for inputs:
<div class="row form-group" ng-repeat="input in inputs">
<div class="well">
<label for="description" class="col-sm-3 control-label">{{input.name}}</label>
<div class="input-group">
<input type="text" class="form-control" required="" placeholder="Enter {{input.name}}" ng-model="input.value" />
<span ng-class="{'input-group-addon danger' : !input.value, 'input-group-addon success': input.value}">
<span ng-class="{'glyphicon glyphicon-remove': !input.value, 'glyphicon glyphicon-ok': input.value}"></span>
</span>
</div>
</div>
</div>
and like this for checks:
<div class="row form-group" ng-repeat="check in checks">
<div class="well">
<label for="description" class="col-sm-3 control-label">{{check.name}}</label>
<div class="btn-group" data-toggle="buttons">
<label ng-class="{'btn btn-danger': !check.active, 'btn btn-success': check.active}" ng-click="check.active = !check.active">
<input type="checkbox" autocomplete="off" required="" ng-model="check.active" />
<span ng-class="{'glyphicon glyphicon-remove': !check.active, 'glyphicon glyphicon-ok': check.active}"></span>
</label>
</div>
</div>
</div>
After that it's easy to check that everything is entered and selected:
$scope.isValid = function() {
var inputsFilled = $scope.inputs.every(function(el) {
return el.value;
});
var allChecked = $scope.checks.every(function(el) {
return el.active;
});
return inputsFilled && allChecked;
};
HTML:
<div ng-if="isValid()">show something</div>
Demo: http://plnkr.co/edit/HDYK7cJqN8jkLvQmojB0?p=info