We Keep Coding

What's a good Object/Array format to produce the following form?

I want to create a JSON that produces the following HTML form:
<div class="row">
<div class="column row-inner">
<label>First name</label>
<input type="text" value="">
</div>
<div class="column row-inner">
<label>Last name</label>
<input type="text" value="">
</div>
</div>
<div class="row">
<div class="column row-inner">
<label >Message</label>
<input type="text" value="">
</div>
</div>
<div class="row">
<div class="column column-big row-inner">
<label>Message</label>
<input type="text" value="">
</div>
<div class="column row-inner">
<label>Message</label>
<input type="text" value="">
</div>
<div class="column row-inner">
<label>Message</label>
<input type="text" value="">
</div>
</div>
I thought of creating an array and have more arrays inside:
schema: [{ // row
[{ // row-inner
name: 'First name', // label
type: 'text', // input
}, {
name: 'Last name',
type: 'text'
}]
}]
However, I find it overly complicated (I'm already confused myself).
Does anyone have a better suggestion?

// the form array
[
// the first row
[
// the first column
{
// the label
name: "First name",
// the input
type: "text"
},
// the second column
{
name: "Last name",
type: "text"
}
],
// the second row
[
{
name: "Message",
type: "text"
}
],
// the third row
[
{
name: "Message",
type: "text"
},
{
name: "Message",
type: "text"
},
{
name: "Message",
type: "text"
}
]
]
The form will be an array like this:
form = [row, row, row, row, ...]
where row is an array like this:
row = [column, column, column, ...]
and column is an object in this format:
column = {
name: "label's text",
type: "input's type"
}
jQuery code to transform the above structure into a form:
var form = ...;
var $form = $("<form></form>");
form.forEach(function(row) {
var $row = $("<div></div>")
.addClass("row")
.appendTo($form);
row.forEach(function(column) {
var $column = $("<div></div>")
.addClass("column row-inner")
.appendTo($row);
$("<label></label>").text(column.name).appendTo($column);
$("<input/>").attr("type", column.type).appendTo($column);
});
});
// append $form to a container

How about an Array of Person Objects?
var people = [];
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var person = new Person('Foo', 'Bar');
people.push(person);
console.log(people[0]);
Person {firstName: "Foo", lastName: "Bar"}
Fiddle: https://jsfiddle.net/q1a7k30L/

How to get the selected id from kendo grid row and populate it to the controls using javascript

I have a Kendo grid which i have added some dummy data and also added edit button inside Kendo grid. when i click edit button it open popup model that i have created and it works fine. No i want to be able to click on edit button and get the selected row id and load the data on the respective text boxes.
I have followed this Example here and am not getting it correctly,but in my case i want it on a button click and load on textboxes
Kendo Grid
//Model starts here
(function () {
var People = [{ Id: 1,firstName: "E", lastName: "Es" },
{ Id: 2, firstName: "J", lastName: "Js" },
{ Id: 3, firstName: "J", lastName: "Js" },
{ Id: 4, firstName: "G", lastName: "Gp" },
{ Id: 5, firstName: "ZKZG", lastName: "RD" }];
$("#grid").kendoGrid({
dataSource:
{
data: People
},
pageable: { pageSize: 10, buttonCount: 5 },
height: 400,
resizable: true,
columnMenu: true,
scrollable: true,
sortable: { mode: "multiple" },
columns: [
{ template: '<input type="button" class="info k-button k-button-icontext" id="btnEdit" name="info" value="Edit" style="height: 26px; margin: 0px 2px; min-width: 64px;" />' },
{ Id:1, title: "First Name", field: "firstName" },
{ Id: 2, title: "Last Name", field: "lastName" },
{ Id: 3, title: "Surname", field: "firstName" },
{ Id: 4, title: "Province", field: "firstName" },
{ Id: 5, title: "City", field: "firstName" },
],
})
})();
//model her
$('#grid').data('kendoGrid').tbody.find('.info').click(function () {
OpenDialog(); here am calling my modelview
//I was trying to follow the example from the link
$(grid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = $("td", row).index(this);
var item = grid.dataItem(row);
var id = item.Id;
alert("row:" + rowIdx + " col:" + colIdx + " id:" + id + "\nitem:" + JSON.stringify(item, null, 4));
});
View Model
Edit
<br />
<div>
<div class="form-group">
<strong>FirstName:</strong>
<input class="form-control" id="txtFirstName" type="text" /><br />
</div>
</div>
<div>
<div class="form-group">
<strong>txtLastName:</strong>
<input class="form-control" id="txtLastName" type="text" /><br />
</div>
</div>
<div>
<div class="form-group">
<strong>Surname:</strong>
<input class="form-control" id="txtSurname" type="text" /><br />
</div>
</div>
<div>
<div class="form-group">
<strong>Province:</strong>
<input class="form-control" id="txtProvince" type="text" /><br />
</div>
</div>
<div>
<div class="form-group">
<strong>City:</strong>
<input class="form-control" id="txtity" type="text" /><br />
</div>
</div>
</div>
<div class="modal-footer" style="border-top: none;">
<button class='btn btn-sm btn-primary pull-right m-t-n-xs' type="submit" id="btnSave" onclick="SaveData()">Save changes</button>
<button class='btn btn-sm btn-primary pull-right m-t-n-xs' type="button" id="btnClose" style="margin:1px;" data-dismiss="modal" onclick="CloseDialog()">Close</button>
</div>
</div>
</div>
</div>
Calling viewModel on button Click
<script>
$("#btnTesting").click(function () {
OpenDialog();
});
</script>

How show diff. HTML based on property in angularjs?

I have a collection of objects that are of types: text, selectoptions and multiselectoptions. I need to display them as editable inputs based on their type.
For example, a text object:
<input type="text" name="caption" value="{{option.value}}" />
A selectoption/multiselectoptions:
<div ng-repeat="value in option.values">
<input type="text" name="{{option.id}}[value][{{value.id}}]" value="{{value.value}}" />
<input type="text" name="{{option.id}}[caption][{{value.id}}]" value="{{value.caption}}" />
</div>
Is this the correct way to do this? Is there a better way to represent it?
Example of the JSON objects:
FORM: {
options: [
{
type: "select",
values: [
{
value: 0,
caption: "Some option"
},
{
value: 1,
caption: "Some other option"
}
]
},
{
type: "text",
caption: "Some text item"
}
]
}

You could use ng-if to display the correct form element based on your model. Here is an example in plunker based on your code.
<form novalidate class="simple-form">
<div ng-repeat="field in FORM.options">
<input type="text" ng-model='field.caption' ng-if="field.type == 'text'" /><br />
<div ng-if="field.type != 'text'">
<div ng-repeat="value in field.values">
Option: <input type="text" name="{{option.id}}[value][{{value.id}}]" value="{{value.value}}" /><br/>
Caption: <input type="text" name="{{option.id}}[caption][{{value.id}}]" value="{{value.caption}}" /><br/>
</div>
</div>
</div>
<button ng-click="submit()">Save</button>
</form>
I check the type field.type and display different HTML in the main ng-repeat.
The app assign your model to FORM:
$scope.FORM = {
options: [
{
type: "select",
values: [
{
value: 0,
caption: "Some option"
},
{
value: 1,
caption: "Some other option"
}
]
},
{
type: "text",
caption: "Some text item"
}
]
};
I also added a submit button that display the model in the Javascript console, so you can see that the data is being updated when you change the values:
<button ng-click="submit()">Save</button>

Try ng-switch which will switch to corresponding HTML based on the type from the JSON.
<div ng-repeat="opt in FORM.options" ng-switch on="opt.type">
<select ng-switch-when="select">
<option ng-repeat="val in opt.values" value='{{val.value}}'>{{val.caption}}</option>
</select>
<input type="text" ng-model="opt.caption" ng-switch-when="text"/>
</div>
Add more MultiSelect types with ng-switch-when = "multiselect". If the type is not specified, set a ng-switch-default to default html.
Working Plunker

Set ng-model dynamically without populating the textbox

I have the following ng-repeat
<div ng-repeat="selectedColumn in SelectedListItems" class="form-group">
<label class="control-label col-lg-4">{{selectedColumn.column}}</label>
<div class="col-lg-8">
<input ng-model="selectedColumn.column" type="text" value="" class="form-control" />
</div>
</div>
The SelectedListItems is:
$scope.SelectedListItems = [
{ column: 'Description' },
{ column: 'Colour' },
{ column: 'KW/PS' },
{ column: 'Chilometri x 1000 km' },
{ column: 'Reg.' },
{ column: 'Equipment' },
{ column: 'No. PJVA' },
{ column: 'Price' }
];
For each of those column I want a new textbox. Also, I wanted to set an ng-model dynamically for every textbox so that I can use the values that are typed in it.
Now I have two issues:
The textbox is populated with the column value and also the ng-model is selectedColumn.column in browser when I inspect the textbox, so I can't seem to understand how will I get the values from those textboxes.

you can do the following .
<div ng-repeat="selectedColumn in SelectedListItems" class="form-group">
<label class="control-label col-lg-4">{{selectedColumn.column}}</label>
<div class="col-lg-8">
<input ng-model="selectedColumn.textInput" type="text" value="" class="form-control" />
</div>
</div>
and can access value like this.
example for description.
$scope.SelectedListItems[0].textInput;

You can add a new property for every item in the array and store the value there.
$scope.SelectedListItems = [
{ columnName: 'Description', columnValue:'' },
{ columnName: 'Colour', columnValue:'' }
];
HTML
<div ng-repeat="selectedColumn in SelectedListItems" class="form-group">
<label class="control-label col-lg-4">{{selectedColumn.columnName}}</label>
<div class="col-lg-8">
<input ng-model="selectedColumn.columnValue" type="text" value="" class="form-control" />
</div>
</div>

how to validate element is angular js?

I make a view from json object. I am able to make take now I need to valid element on keyup event and blur event. So I googled it and find this tutorial
http://scotch.io/tutorials/javascript/angularjs-form-validation
I try to implement this in my demo, but when I used this:
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine"
class="help-block">`Your name is required.</p>
This break my view can you please tell me how to validate thing in angular if there is no form?
Here is my plunker: http://plnkr.co/edit/we1QHuDuCOOR4tDAk6yv?p=preview
<script>
function Controller($scope) {
$scope.outputs = {};
$scope.inputs = [{
type: "email",
name: "email",
required:true
}, {
type: "text",
name: "name",
}, {
type: "number",
name: "phonenumber",
}, {
type: "checkbox",
name: "whant to check",
},
{
type: "url",
name: "server Url",
}];
}
</script>

A solution is to use ng-form like
<div ng-switch="input.type" ng-form="myfrm">
<div ng-switch-when="text">
<input type="text" ng-model="outputs[input.name]"/>
</div>
<div ng-switch-when="email">
<input type="email" ng-model="outputs[input.name]" name="input" ng-required="input.required">
<span ng-if="myfrm.input.$invalid">Please enter a valid email</span>
</div>
<div ng-switch-when="number">
<input type="number" ng-model="outputs[input.name]"/>
</div>
<div ng-switch-when="url">
<input type="number" ng-model="outputs[input.name]"/>
</div>
<div ng-switch-when="checkbox">
<input type="checkbox" ng-model="outputs[input.name]" ng-checked="outputs[input.name]" value="outputs[input.name]"/>
</div>
</div>
Demo: Plunker