On the code you can see as follows:
<div class="form-group form-group-sm" ng-repeat="sForm in sForms">
<label class="col-sm-3 control-label">{{sForm.label}}</label>
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="{{sForm.place}}" name="{{sForm.name}}" ng-model="search[sForm.propertyName]" ng-click="searchDisabled(sForm.val)" ng-disabled="{{sForm.disabled}}" />
</div>
<div class="col-sm-1">
<input type="radio" class="radio" name="checked" ng-click="searchDisabled(sForm.val)" ng-model="formRadio.checked" value="{{sForm.val}}" ng-hide="{{!sForm.disabled}}" />
</div>
</div>
doesn't work the ngModel value search[sForm.propertyName]. I don't know why.. Here are the properties:
$scope.sForms = [
{
label: 'Lastname',
place: 'Searching lastname',
name: 'Lname',
val: 1,
propertyName: 'lname',
disabled: $scope.disabledLname,
hideRadio: !$scope.disabledLname
},
{
label: 'Firstname',
place: 'Searching firstname',
name: 'Fname',
val: 2,
propertyName: 'fname',
disabled: $scope.disabledFname,
hideRadio: !$scope.disabledFname
}];
The disabled value also didn't work. when I check the first input then the second input need to be disabled.
Related
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/
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
When I press submit on my HTML code I get access to the javascript even if I haven't entered the required field "Email". But I see the litte "you need to fill this" popup for 0.5 seconds just before it sends me to the script. What do I need to do? Seems like it's a problem in jquery maybe?
Haris.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail" class="col-sm-3 control-label">Epost :</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail" placeholder="Epost" required="required">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-3">
<button type="submit" href="javascript:;" class="simpleCart_checkout">
<img src="/images/bla.png" alt="Kort">
</button>
</div>
</div>
</form>
this form is in the checkout. At the bottom (payson image)
Called javascript:
simpleCart({
currency: "SEK",
checkout: {
type: "SendForm",
url: "http://bla.com/checkout.php",
method: "POST",
currency: "SEK"
},
shippingCustom: function () {
if (simpleCart.total() > 4500) {
return 0;
} else {
return 0;
}
},
cartStyle: "table",
cartColumns: [
/* Picture (same for every product right now) */
/* Name */
{ attr: "name", label: "Produkt" },
{ view: "decrement", label: "Minska" },
{ attr: "quantity", label: "Kvantitet" },
{ view: "increment", label: "Höj" },
/* Price */
{ attr: "price", label: "Pris", view: 'currency' },
{ attr: "total", label: "SubTotal", view: 'currency' },
/* Remove */
{ view: "remove", text: "Ta bort", label: false }
]
});
simpleCart.bind('beforeCheckout', function (data) {
data.email = document.getElementById("inputEmail").value;
});
try to replace this line:
<input type="email" class="form-control" id="inputEmail" placeholder="Epost" required="required">
with this:
<input type="email" class="form-control" id="inputEmail" placeholder="Epost" required />
Consider the following:
self.container = ko.observableArray([{name: 'hello', amount: [{item: name, key: '4', selected: 0}, {item: 'name', key: 2, selected: '1'}]}, {name: 'hello', amount: [{item: name, key: 10, selected: 0}, {item: name, key: 8, selected: '1'}]}]);
self.amountSelected = ko.observableArray();
If I do:
<div data-bind="foreach: container">
<div data-bind="foreach: amount">
<input type="radio" name="radio-selection-name" data-bind="attr: {value: key}, checked: $root.amountSelected()[$index()] || selected" />
</div>
</div>
This works, what doesn't work is notice how one of the amounts it's selected as it has a '1'
How do I say, select the currently selected item or use the selected item for this object?
Is there a way to set, for that index, the radio to selected if the selected attribute on the object is a '1'?
You cannot select more then one radio, so the checked binding dont need to be an observableArray for radios. The best way to set the value of the input is the checkedValue binding, in the snippet there are an example of both, but plese see the documentation Checked binding KO it is very useful.
function ViewModel(){
this.container = ko.observableArray([{name: 'hello', amount: [{item: name, key: 4, selected: 0}, {item: 'name', key: 2, selected: '1'}]}, {name: 'hello', amount: [{item: name, key: 10, selected: 0}, {item: name, key: 8, selected: '1'}]}]);
this.amountSelectedRadio = ko.observable(2);
this.amountSelectedChecked = ko.observableArray([8,4]);
}
ko.applyBindings(new ViewModel())
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h2>Checked Binding: Radio</h2>
<div data-bind="foreach: container">
<div data-bind="foreach: amount">
<input type="radio" name="radio-selection-name" data-bind="checked: $root.amountSelectedRadio, checkedValue: key" />
</div>
</div>
<h2>Checked Binding: CheckBox</h2>
<div data-bind="foreach: container">
<div data-bind="foreach: amount">
<input type="checkbox" name="checkbox-selection-name" data-bind="checked: $root.amountSelectedChecked, checkedValue: key" />
</div>
</div>
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>