Skip to content

Instantly share code, notes, and snippets.

@Vallabharayudu

Vallabharayudu/app.html

Last active April 17, 2019 05:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Vallabharayudu/c15995f7d0f7ec17550a1cef0b4ed479 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Vallabharayudu/c15995f7d0f7ec17550a1cef0b4ed479 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.html
<template>
<require from="styles.css"></require>
<h1>${message}</h1>
<div class="container">
<table style="width:80%;margin:0 auto;table-layout:fixed;">
<tr repeat.for="box of boxes">
<td>
${box.LabelName}
</td>
<td>
<select>
<option>${box.option}</option>
</select>
</td>
<td>
<select>
<option>${box.code}</option>
</select>
</td>
<td style="position:relative;">
<input type="text" placeholder="phone number" value.bind="box.value" style="width:100%;"/>
<div class="AddIcon" click.delegate="addMore()" show.bind="boxes.length < 5 && $index == boxes.length-1 ">+</div>
<div class="RemoveIcon" click.delegate="Remove(box)" show.bind="$index !== 0">*</div>
</td>
</tr>
</table>
<button class="btn btn-priimary" click.delegate="saveData()">Save</button>
<ul>
<li>Vallabha</li>
<li>Rayudu</li>
<li repeat.for="option of options">${option.name}</li>
</ul>
</div>
<div>
<table style="width:80%;margin:0 auto;table-layout:fixed;">
<tr repeat.for="item of storedData">
<td>
${item.LabelName}
</td>
<td>
${item.value}
</td>
</tr>
</table>
</div>
</template>
Raw
app.js
export class App {
message = 'Hello World!';
constructor(){
this.boxes = new Array();
this.options = new Array();
this.boxes.push(new BoxOfVal('Phone','1','1','7676001317'));
this.options.push(new optionsvalues('Vallabha1'));
this.options.push(new optionsvalues('Rayudu1'));
this.options.push(new optionsvalues('Roopa'));
this.options.push(new optionsvalues('Jai'));
this.storedData = new Array();
}
addMore(){
this.boxes.push(new BoxOfVal('','','',''));
}
Remove(BoxOfVal){
this.boxes.splice(this.boxes.indexOf(BoxOfVal),1);
}
//saveData(){
// this.storedData.push(new BoxOfVal(this.boxes[0].LabelName,this.boxes[0].option,this.boxes[0].code,this.boxes[0].value));
//}
}
export class BoxOfVal {
constructor(LabelName,option,code,value){
this.LabelName = LabelName;
this.option = option;
this.code = code;
this.value = value;
}
}
export class optionsvalues{
constructor(name){
this.name = name;
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<!--<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>-->
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
styles.css
.AddIcon{
position:absolute;
font-size:24px;
font-weight:bold;
right:-26px;
top:-3px;
cursor:pointer;
}
.RemoveIcon{
position:absolute;
font-size:24px;
font-weight:bold;
right:-40px;
top:3px;
cursor:pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment