I created a responsive grid in Ionic which doesn't work properly. The Grid is not responsive. So it isn't automatically adjusted on different screen size and set no linebreak if I add many Buttons or delete these to the/from the system. Either they merge into each other or all the buttons are in a column below the each other on small screens. How can i solve this?
I add or delete all the buttons in a JSON-File. From there I parse the Buttons in to the system.
JSON: 7 Buttons
[
{
"_comment": "Games",
"type": "button",
"id": "entertainmentButton",
"icon": "ion-film-marker",
"name": "Game and entertainment",
"topage": "servicePage.html",
"color": "white",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"backgroundcolor": "#0066FF",
"font-size": "26px"
},
{
"_comment": "Logo",
"type": "button",
"id": "MainPageLogo",
"icon": "",
"image": "../img/icon/logo_moenchsweiler.png",
"name": "second link",
"topage": "",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"color": "",
"backgroundcolor": "",
"font-size": ""
},
{
"_comment": "Logo",
"type": "button",
"id": "MainPageLogo",
"icon": "",
"image": "../img/icon/logo_moenchsweiler.png",
"name": "second link",
"topage": "",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"color": "",
"backgroundcolor": "",
"font-size": ""
},
{
"_comment": "Logo",
"type": "button",
"id": "MainPageLogo",
"icon": "",
"image": "../img/icon/logo_moenchsweiler.png",
"name": "second link",
"topage": "",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"color": "",
"backgroundcolor": "",
"font-size": ""
},
{
"_comment": "Logo",
"type": "button",
"id": "MainPageLogo",
"icon": "",
"image": "../img/icon/logo_moenchsweiler.png",
"name": "second link",
"topage": "",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"color": "",
"backgroundcolor": "",
"font-size": ""
},
{
"_comment": "Logo",
"type": "button",
"id": "MainPageLogo",
"icon": "",
"image": "../img/icon/logo_moenchsweiler.png",
"name": "second link",
"topage": "",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"color": "",
"backgroundcolor": "",
"font-size": ""
},
{
"_comment": "Logo",
"type": "button",
"id": "MainPageLogo",
"icon": "",
"image": "../img/icon/logo_moenchsweiler.png",
"name": "second link",
"topage": "",
"function": "OpenLink()",
"controller": "OpenLinkCtrl",
"color": "",
"backgroundcolor": "",
"font-size": ""
}
]
JavaScript:
var myApp = angular.module('starter', []);
myApp.config(['$sceDelegateProvider', function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
''
]);
}]);
myApp.controller('generateHTMLCtrl', function ($scope, $http, $compile, $interpolate, $templateCache) {
$http.get('myjsonfile.json').success(function (data) {
for(var i in data){
var interpolated = $interpolate($templateCache.get("tpl").trim())(data[i]);
angular.element(document.querySelector("#loadhere")).append($compile(interpolated)($scope));
}
});
});
myApp.controller("OpenLinkCtrl", function ($scope) {
$scope.OpenLink = function () {
alert("Link open");
}
});
HTML:
<body ng-app="starter" class="padding" style="text-align: center">
<div class="row responsive-md" ng-controller="generateHTMLCtrl" id="loadhere"></div>
<script type="text/ng-template" id="tpl">
<div class="col">
<a style="color:{{color}}; background-color:{{backgroundcolor}} " id="{{id}}" class="{{type}}" href="{{topage}}" ng-controller="{{controller}}" ng-click="{{function}}"> <i class="{{icon}}"><br></i>{{name}}</a>
</div>
</script>
</body>
What do I need to modify in HTMl-code that the Grid is responsive?
Edit:
It should look like here, e.g:
<div class="row responsive-sm">
<div class="col">
<button style="width: 100px; height: 100px">Test</button>
<button style="width: 100px; height: 100px">Test</button>
<button style="width: 100px; height: 100px">Test</button>
<button style="width: 100px; height: 100px">Test</button>
<button style="width: 100px; height: 100px">Test</button>
<button style="width: 100px; height: 100px">Test</button>
<button style="width: 100px; height: 100px">Test</button>
</div>
</div>
This code displays the buttons as follows:
on large screen size:
bit smaller:
very small:
Edited:
The solution:
<div ng-controller="generateHTMLCtrl" id="loadhere">
<script type="text/ng-template" id="tpl">
<a style="color:{{color}}; background-color:{{backgroundcolor}};"
id="{{id}}" class="{{type}}" href="{{topage}}"
ng-controller="{{controller}}" ng-click="{{function}}">
<i class="{{icon}}"><br></i>{{name}}
</a>
</script>
</div>
what you want is something more like this:
<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
<div class="col col-25" ng-if="$index < images.length">
<img ng-src="{{images[$index].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 1 < images.length">
<img ng-src="{{images[$index + 1].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 2 < images.length">
<img ng-src="{{images[$index + 2].src}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 3 < images.length">
<img ng-src="{{images[$index + 3].src}}" width="100%" />
</div>
</div>
This will create a maximum of 4 images per row that wrap and stack. You can also make it more or less images per by changing ng-if statement in for rows and then the amount of images in that row
When you are on every forth image, you are going to show the row class, thus creating a new row
you will pre-allocate four columns for you row, but you would first check to see if it will ever be filled to prevent an undefined exception
If the image exists at the specified index, then add it to the column
Edit!
Try this
add this css class:
.gallery {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
then put this in your html:
<ion-content ng-controller="ExampleController" ng-init="loadImages()" class="gallery">
<span ng-repeat="image in images">
<img src="{{image}}" width="150px">
</span>
since ionic is built on built on top of flex box you can make a flexbox grid in ionic.
Related
Hi I am parsing nested array but getting ReferenceError: player is not defined . I have state variable players which is json array as follows :
[
{
"game": "badminton",
"players": [
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
}
]
},
{
"game": "football",
"players": [
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
},
{
"name": "Hitesh",
"url": "https://i.imgur.com/aBpM49y.jpg",
"points": "1034.67",
"rank": "1",
"profile": "/hitesh"
}
]
}
]
I am parsing it inside render function and creating a card based UI element for my view as follows :
render(){
// console.log(this.players);
var topplayers=[];
this.state.players.map(function(game,index){
topplayers.push(<div class="row" style={styles.row}>
<div class="col">
{game.game} Legend in Bangalore
</div>
</div>);
const row=<div class="row">;
topplayers.push({row});
game.players.map(function(player,index){
topplayers.push(<div class="col">
<div class="card">
<img class="card-img-top" src={player.url} alt="200-200" style={styles.image}/>
<div class="card-body">
<h4 class="card-title">{player.name}</h4>
<div >
<div style={styles.div}><img src="../../images/points.png" style={styles.rankimg}/>{player.points}</div>
<div style={styles.div}><img src="../../images/rank.png" style={styles.rankimg}/>{player.rank}</div>
</div>
View Profile
</div>
</div>
</div>)
}
)
const rowend=</div>;
topplayers.push({rowend})
}
)
return(
<div>
{topplayers}
</div>
);
}
But I am getting error ReferenceError: player is not defined . can someone help me where am I making mistake.
The problem is the const variables declared.
const row=<div class="row"> Here, div is marking start of html and
const rowend=</div>; here is ending tag.
So, everything in between is considered plain html. The map function is not behaving as a function but plain html. And that's why when player is put inside {}, javascript is trying to find the variable which doesn't exists.
Basically, in your code; everything written between <div class="row"> and </div> is considered html
To make it work, you need to restructure the code to something like this:
render(){
// console.log(this.players);
var topplayers=[];
this.state.players.map(function(game,index){
topplayers.push(<div class="row" style={styles.row}>
<div class="col">
{game.game} Legend in Bangalore
</div>
</div>
);
const row=<div class="row">
{game.players.map(function(player,index){
return (<div class="col">
<div class="card">
<img class="card-img-top" src={player.url} alt="200-200" style={styles.image}/>
<div class="card-body">
<h4 class="card-title">{player.name}</h4>
<div >
<div style={styles.div}><img src="../../images/points.png" style={styles.rankimg}/>{player.points}</div>
<div style={styles.div}><img src="../../images/rank.png" style={styles.rankimg}/>{player.rank}</div>
</div>
View Profile
</div>
</div>
</div>)
})
}
</div>;
topplayers.push(row)
})
return(
<div>
{topplayers}
</div>
);
}
Here, I have moved the game.players.map in {} wrapped in the <div class="row"> and </div>. This will make sure to work it like a function. Instead of pushing result into an array, I am directly returning values from the map function which will be injected between the required divs.
Hope you understand.
Please revert in case of any doubts
I am trying to iterate through an array of categories with subcategories.
The problem. I have this array of categories:
$scope.categories = [{
"_id": 1,
"name": "Cat 1",
"categories": {
"_id": 11,
"name": "Cat 11",
"categories": {
"_id": 111,
"name": "Cat 111",
"categories": null
}
}
}, {
"_id": 2,
"name": "Cat 2",
"categories": null
}, {
"_id": 3,
"name": "Cat 3",
"categories": null
}];
As you can see, is an array of objects with subcategories, so I know that I need a recursive solution.
I need to show all the categories into a md-select (it is not necesary group it, but it will be great) and I am trying this:
<md-input-container class="md-block">
<label>Categories</label>
<md-select ng-model="selectedCategory">
<md-option ng-value="category._id" ng-repeat-start="category in categories">{{category.name}}</md-option>
<span ng-repeat-end ng-include="'subcategories'" ng-if="category.categories"></span>
</md-select>
</md-input-container>
<script type="text/ng-template" id="subcategories">
{{category.name}}
<md-option ng-value="category._id" ng-repeat-start="category in category.categories">{{category.name}}</md-option>
<span ng-repeat-end ng-include="'subcategories'" ng-if="category.categories"></span>
It works partially, but it is not the result expected.
What I want? Something like this
What I have? This code
Tell me if need more details.
Thanks
You can simply flatten your list and style elements by their nesting level.
angular
.module('app', ['ngMaterial'])
.controller('AppController', function($scope) {
$scope.categories = [{
"_id": 1,
"name": "Cat 1",
"categories": [{
"_id": 11,
"name": "Cat 11",
"categories": [{
"_id": 111,
"name": "Cat 111",
"categories": null
}]
}]
}, {
"_id": 2,
"name": "Cat 2",
"categories": null
}, {
"_id": 3,
"name": "Cat 3",
"categories": null
}];
$scope.flattenCategories = flatten($scope.categories, 0);
function flatten(categories, level) {
var flat = [];
for (var i = 0, n = categories.length, category; category = categories[i]; i++) {
flat.push({
_id: category._id,
name: category.name,
level: level
});
if (category.categories) {
flat = flat.concat(flatten(category.categories, level + 1));
}
}
return flat;
}
});
.subcategory-0 .md-text {
margin-left: 0;
}
.subcategory-1 .md-text {
margin-left: 8px;
}
.subcategory-2 .md-text {
margin-left: 16px;
}
.subcategory-3 .md-text {
margin-left: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<div ng-app="app" ng-controller="AppController">
<form name="myForm">
<md-input-container class="md-block">
<label>Categories</label>
<md-select ng-model="selectedCategory" name="myCategory">
<md-option ng-class="'subcategory-' + category.level" ng-value="category._id" ng-repeat="category in flattenCategories track by category._id">{{ category.name }}</md-option>
</md-select>
<!-- <pre ng-bind="flattenCategories | json"></pre> -->
</md-input-container>
</form>
</div>
I have json output from api wants to display in ng-repeat on div
[
{
"companyName": "abc",
"namesList": [
{
"name": "Jaakr1",
"email": "poonam.kumar#abc.com",
"job": "Developer 1"
},
{
"name": "janam1",
"email": "raja#abc.com",
"job": "Developer 2"
}
]
}
]
I want to display like this
<div class="list-row">
<div class="list-cell">abc</div>
<div class="list-cell">Jaakr1</div>
<div class="list-cell">poonam.kumar#abc.com</div>
<div class="list-cell">Developer 1</div>
</div>
<div class="list-row">
<div class="list-cell"></div>
<div class="list-cell">janam1</div>
<div class="list-cell">raja#abc.com</div>
<div class="list-cell">Developer 2</div>
</div>
Please provide the solution
Apart from all the answers posted above i would like to post mine that will handle multiple JSON objects inside the array. Since you have only one object right now one of the above solution may work but when you have more that one object inside the array then this will work great.
HTML
<div ng-app='app' ng-controller='mainCtrl'>
<div ng-repeat="(key1, value1) in data">
<div class="list-row" ng-repeat="(key2, value2) in data[key1].namesList">
<div class="list-cell"><span ng-if='$index == 0'>{{data[key1].companyName}}</span> </div>
<div class="list-cell">{{value2.name}}</div>
<div class="list-cell">{{value2.email}}</div>
<div class="list-cell">{{value2.job}}</div>
</div>
</div>
</div>
Controller
angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
$scope.data = [
{
"companyName": "abc",
"namesList": [
{
"name": "Jaakr1",
"email": "poonam.kumar#abc.com",
"job": "Developer 1"
},
{
"name": "janam1",
"email": "raja#abc.com",
"job": "Developer 2"
}
]
},
{
"companyName": "abc2",
"namesList": [
{
"name": "Jaakr12",
"email": "poonam.kumar#abc.com2",
"job": "Developer 12"
},
{
"name": "janam12",
"email": "raja#abc.com2",
"job": "Developer 22"
}
]
}
];
})
For more generalization i have added two JSON objects inside the array and the output is exactly what you expected. To play around i have added the JSFIDDLE
<div *ngFor="let person of jsonObj.namesList">
<div class="list-cell"></div>
<div class="list-cell">{{ person.name }}</div>
<div class="list-cell">{{ person.email }}</div>
<div class="list-cell">{{ person.job}}</div>
</div>
You can do this,
<div ng-repeat="item in myArray[0].namesList" class="list-row">
<div class="list-cell">{{item.name}}</div>
<div class="list-cell">{{item.email}}</div>
<div class="list-cell">{{item.job}}</div>
</div>
DEMO
var myApp = angular.module('ReqWebApp', [])
myApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.myArray = [
{
"companyName": "abc",
"namesList": [
{
"name": "Jaakr1",
"email": "poonam.kumar#abc.com",
"job": "Developer 1"
},
{
"name": "janam1",
"email": "raja#abc.com",
"job": "Developer 2"
}
]
}
];
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ReqAppController">
<div ng-repeat="item in myArray[0].namesList" class="list-row">
<div class="list-cell">{{item.name}}</div>
<div class="list-cell">{{item.email}}</div>
<div class="list-cell">{{item.job}}</div>
</div>
</body>
</html>
You can do something like this:
<div class="list-row" ng-repeat="nameObj in data.namesList">
<div class="list-cell">{{data.companyName}}</div>
<div class="list-cell">{{nameObj.name}}</div>
<div class="list-cell">{{nameObj.email}}</div>
<div class="list-cell"{{nameObj.job}}</div>
</div>
Sorry, the titles is not clear at all, but I didn't really know a better title to explain what I'm tring to do.
Basically, I've this set of data:
$scope.data = [
{"id": 0, "name": "Testing name 0", "type": 1, "details": {"pinned": true, "link": [1,2]}},
{"id": 1, "name": "Testing name 1", "type": 0, "details": {"pinned": true, "link": [4]}},
{"id": 2, "name": "Testing name 2", "type": 0, "details": {"pinned": true, "link": []}},
{"id": 3, "name": "Testing name 3", "type": 0, "details": {"pinned": true, "link": []}},
{"id": 4, "name": "Testing name 4", "type": 1, "details": {"pinned": true, "link": [4,0]}},
{"id": 5, "name": "Testing name 5", "type": 1, "details": {"pinned": true, "link": []}},
{"id": 6, "name": "Testing name 6", "type": 1, "details": {"pinned": true, "link": [1,2,3,4]}}
];
and this repeater to display only the rooms with type 1:
<ion-list class="list">
<div ng-repeat="item in data">
<ion-item class="item item-stable" ng-if="item.type==1">
{{item.name}}
</ion-item>
<div ng-if="item.type==1" ng-repeat="(key, value) in item.details">
<div ng-repeat="linkID in value" ng-if="key == 'link'">
<ion-item class="item-accordion">
{{linkID}}
</ion-item>
</div>
</div>
</div>
</ion-list>
as you can see from the code above, I'm printing a top level item with the name of all "type:" 1, and as a sublevel, all off the values inside link: [].
So far so good, but the values inside link: [] are IDs of linked posts, and instead of 1,2 or 3 I'd like to print "Testing name 1", "Testing name 2", "Testing name 3" and so on...
I can't figure out the best way. All the data is there, but I just can't display it. I tried with another ng-if, but nothing. Any help?
here's an example: http://codepen.io/nickimola/pen/dMNawj?editors=1010
Instead of using ng-if better use filter.
Live example on jsfiddle.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
$scope.data = [{
"id": 0,
"name": "Testing name 0",
"type": 1,
"details": {
"pinned": true,
"link": [1, 2]
}
}, {
"id": 1,
"name": "Testing name 1",
"type": 0,
"details": {
"pinned": true,
"link": [4]
}
}, {
"id": 2,
"name": "Testing name 2",
"type": 0,
"details": {
"pinned": true,
"link": []
}
}, {
"id": 3,
"name": "Testing name 3",
"type": 0,
"details": {
"pinned": true,
"link": []
}
}, {
"id": 4,
"name": "Testing name 4",
"type": 1,
"details": {
"pinned": true,
"link": [4, 0]
}
}, {
"id": 5,
"name": "Testing name 5",
"type": 1,
"details": {
"pinned": true,
"link": []
}
}, {
"id": 6,
"name": "Testing name 6",
"type": 1,
"details": {
"pinned": true,
"link": [1, 2, 3, 4]
}
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController">
<ion-list class="list">
<div ng-repeat="item in data|filter:{type:1}">
<ion-item class="item item-stable">
{{item.name}}
</ion-item>
<div ng-repeat="linkID in item.details.link">
<ion-item class="item-accordion">
Lnked post--{{data[linkID].name}}
</ion-item>
</div>
<div ng-show="item.details.link.length==0">
<i>Nothing linked</i>
</div>
</div>
</ion-list>
</div>
</div>
Think that is what you expected?
<ion-content ng-app="ionicApp" ng-controller="MyCtrl">
<ion-list class="list">
<div ng-if="item.type==1" ng-repeat="item in data">
<ion-item class="item item-stable">
{{item.name}}
</ion-item>
<div ng-repeat="link in item.details.link">
<ion-item ng-if="data[link].name" class="item-accordion">
{{data[link].name}}
</ion-item>
<ion-item ng-if="!data[link].name" class="item-accordion">
Link not found: {{link}}
</ion-item>
</div>
<ion-item ng-if="item.details.link.length == 0">
Nothing
</ion-item>
</div>
</ion-list>
</ion-content>
You could load the links into the scope then reference them with the id (assuming they're in order).
<div ng-repeat="linkID in value" ng-if="key == 'link'">
<ion-item class="item-accordion">
{{links[linkID]}}
</ion-item>
</div>
I have searched the web and found no example. I wonder if someone could help.
I have two instances of a dropdown or maybe more and I want to apply the add input dynamically to only that form but it applies to everyone with that ng-model everywhere on the web page.
The code is here https://plnkr.co/edit/PPDYKjztPF528yli9FbN
HTML:
<div class="main-content__right" ng-controller="QuestionController">
<div ng-repeat="element in questionList">
<fieldset>
<div ng-repeat="choice in formOptionData track by $index">
<a class="remove-field remove u-pull-right" ng-click="remove()">Remove</a>
<input id="input{{choice.name}}" placeholder="{{choice.label}}" type="number" name="{{choice.name}}">
</div>
<div id="add-more" class="well">
<div class="field">
<div style="width:100%;" class="dropdown">
<select name="{{options.name}}" id="select" data-ng-model="selectedValue" data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'" ng-change="onCategoryChange(selectedValue)">
<option value="" data-id="null" disabled="" selected="">Select an item...</option>
</select>
</div>
</div>
{{formData}}
</div>
</fieldset>
</div>
</div>
APP.js
var app = angular.module("cab", []);
app.controller('QuestionController', function($scope) {
$scope.formOptionData = [];
$scope.selectedValue = {};
$scope.questionList = [{
"sectionTitle": "Travel",
"inputType": "select",
"inputElement": [{
"label": "Public transport",
"name": "travelOutgoing",
"helpInfo": "include train journeys",
"type": "select"
}, {
"label": "Taxis",
"name": "travelOutgoing",
"type": "select"
}
]
},
{
"sectionTitle": "Leisure",
"title": "Enter the amount you spend on entertainment and leisure. Leave them blank if they don\"t apply to you.",
"inputType": "select",
"inputElement": [
{
"label": "Eating out",
"name": "leisureOutgoing",
"helpInfo": "Include coffees, teas and snacks",
"type": "select"
},
{
"label": "Going out",
"name": "leisureOutgoing",
"helpInfo": "Include drinks, taxis, admission charges",
"type": "select"
}
] }
];
$scope.onCategoryChange = function(selectedItem) {
this.formOptionData.push(selectedItem);
};
$scope.remove = function(element) {
this.formData.splice(element,1);
};
});