Develop Reference

Any option to select value in between 2 selected items in Selectzie.js in Mobile

I am using Selectize.js to an input to choose multiple options. The order of the selected value is important for me and I need an option to change the order of selected values or select a new option in between selected values.
But in mobile view, there seems no option to choose a value between 2 selected values. This works on a desktop by using only arrow keys in the keyboard.
There are plugins available such as remove_button and drag_drop, but both are helpless in my situation. drag_drop plugin is not yet working in the mobile. and remove_button only help to unselect a value.
Steps to reproduce:
On a form with the input of Selectize initialized.
Select 3 values from the drop-down
Try to add an option in between 2 and 3
Expected Result:
See a text cursor in the input in between the value 2 and 3 and display the drop-down option to choose. If we choose an option, it will add in between 2 and 3
Actual Result:
There we can't see any cursor while clicking in between 2 selected values, only we can click on the selected value which doesn't make any changes.
jsfiddle Link is here
var optionList = [{ "name": "radialis",
"id": "1"
},
{ "name": "Extensor",
"id": "2"
},
{ "name": "Median nerve",
"id": "3"
},
{ "name": "syndrome",
"id": "4"
},
{ "name": "carpi",
"id": "5"
},
{ "name": "longus",
"id": "6"
}];
$('#example').selectize({
openOnFocus: true,
options: optionList,
labelField: "name",
valueField: "id",
sortField: "name",
searchField: "name",
closeAfterSelect: false,
delimiter: ',',
persist: false,
maxItems: 15,
create: function(input) {
return {
value: input,
text: input
}
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/js/standalone/selectize.min.js"></script>
<div class="container-fluid">
<div class="form-group">
<label for="exampleInputPassword1">Selectize.js</label>
<input type="text" class="" id="example" value="3,4,1">
</div>
</div>

How to create dynamic form from given JSON alongwith form validation using angularjs

I have this JSON data with me which has some options to build a form and I'm trying to create a dynamic form with each question per screen along with next/prev button. This is what I have tried so far. Can someone help me with creating form with this JSON along with form validation and prev/next functionality?
Plunker: https://plnkr.co/edit/p2qVI7kqOnqoKjYr6yb3?p=preview
JSON
var questions = [
{
text: "What is your name?",
type: "text",
required: true,
model: "name"
},
{
text: "Tell us something about yourself.",
type: "textarea",
required: true,
model: "about"
},
{
text: "Explain your job profile",
type: "textarea",
required: false,
model: "profile"
},
{
text: "Which is the largest country in the world by population?",
offeredAnswers: [
{"value": "Yes"},
{"value": "No"}
],
type: "radio",
required: true,
model: "radio1"
},
{
text: "Would you be available to work in shifts?",
offeredAnswers: [
{"value": "Yes"},
{"value": "No"}
],
type: "radio",
required: true,
model: "radio2"
},
{
text: "How long have you been working at your current job?",
offeredAnswers: [
{"value": "Not long, it's part time"},
{"value": "1-2 yrs"},
{"value": "3-4 yrs"},
{"value": "5+ yrs"}
],
type: "radio",
required: true,
model: "radio3"
}
];
HTML
<form name="mmSurvey">
<ul id="options">
<li ng-show="question">
<label>
<div ng-if="(question.type == 'radio' && question.options)">
<p ng-repeat="option in question.options">
<input type="{{option.type}}" name="" ng-change="updateAnswerList(option.value)" ng-required="{{option.required}}" />
</p>
</div>
<div ng-if="(question.type == 'text')">
<input type="{{question.type}}" ng-required="{{question.required}}" />
<!-- show an error if this isn't filled in -->
<p ng-show="mmSurvey.mm.$error.required">Please enter your name.</p>
</div>
<div ng-if="(question.type == 'textarea')">
<textarea ng-required="{{question.required}}"></textarea>
</div>
</label>
</li>
</ul>
</form>

Hmm.. Assuming you are asking about the prev/next part.
It can be done by assigning your current question to a variable.
//init
var currentIndex = 0;
//update question object according to index
$scope.$watch(function() {
return currentIndex;
}, function() {
$scope.question = questions[currentIndex];
});
$scope.next = function() {
// validation here
// hint: you can use formname.$invalid for first check
// increase question number
currentIndex++;
}
// similar for prev
By the way you should put type="button" in every button so it won't attempt to submit the form every time you click it.

AngularJS data push

I have the following AngularJS app.
From $scope.forms I create some inputs on the html part using ng-repeat.
The thing I dont understand is how to push the data from attributes: ["title", "firstname", "lastname", "address"] inputs into values: []
Can someone explain me how to push the input values into my values key?
Or maybe if there is a best solution to explain?
function sampleCtrl($scope) {
$scope.forms = [
{
title: "Something",
attributes: ["title", "firstname", "lastname", "address"],
values: [] //here i want the values from the attributes
},
{
title: "Something else",
attributes: ["title", "name", "job", "address"],
values: [] //here i want the values from the attributes
} ]; }
http://jsfiddle.net/U3pVM/18198/

See #Grundy's answer for a direct approach where you don't have to change your model.
Do allow me to suggest a different approach though (that also includes the fact that you need to use ng-model to bind the input's value): model the attribute + value combination as an actual thing. So e.g.:
$scope.forms = [
{
title: "Something",
pairs: [{label: "title", value: ""}, {label: "firstname", value: ""}]
}
];
This view model is much easier to bind to in a view:
<div ng-repeat="pair in form.pairs">
<input type="text" placeholder="{{pair.label}}" ng-model="pair.value" />
</div>
The reason I suggest this is because the $scope works best IMO if it's tailored to being bound to in views. If you need the other format (i.e. a values array) perhaps to send it off to a back end service, you'd best map the view model back to the appropriate data format. For example:
var values = $scope.forms[0].pairs.map(function(p) {
return p.value;
});
See this forked fiddle for a full example.

You should see about ng-model. as model you can use values[$index] so, in values array values in same order as in attributes.
function sampleCtrl($scope) {
$scope.forms = [
{
title: "Something",
attributes: ["title", "firstname", "lastname", "address"],
values: [] //here i want the values from the attributes
},
{
title: "Something else",
attributes: ["title", "name", "job", "address"],
values: [] //here i want the values from the attributes
}
];
}
body {
font-family: courier new;
}
h1 {
font-size: 24px;
margin: 0 0 20px;
}
h2 {
font-size: 18px;
}
.form {
margin: 0 0 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<h1>Form</h1>
<div ng-controller="sampleCtrl">
<div class="form" ng-repeat="form in forms">
<h2>{{form.title}}</h2>
<div ng-repeat="input in form.attributes">
<input type="text" ng-model="form.values[$index]" placeholder="{{input}}" />
</div>
{{form.attributes}}
{{form.values}}
</div>
</div>
</div>

I have added the changes to your fiddle:
<div ng-app>
<h1>Form</h1>
<div ng-controller="sampleCtrl">
<div class="form" ng-repeat="form in forms">
<h2>{{form.title}}</h2>
<div ng-repeat="input in form.attributes" ng-init="mod = []">
<input type="text" placeholder="{{input}}" ng-init="mod[$index] = form.values[$index]" ng-model="mod[$index]"/>
</div>
</div>
</div>
</div>
http://jsfiddle.net/U3pVM/18201/

It's simple : Here is updated fiddle
Just added an ng-model that points at the exact same index in attributes array and that of in values array.
<div ng-app>
<h1>Form</h1>
<div ng-controller="sampleCtrl">
<div class="form" ng-repeat="form in forms">
<h2>{{form.title}}</h2>
<div ng-repeat="input in form.attributes">
<input type="text" ng-model="form.values[$index]" placeholder="{{input}}" />
</div>
</div>
<button ng-click="haha()">Test!</button>
</div>
</div>
And no change in JS. Only added new function haha() to test it out
function sampleCtrl($scope) {
$scope.forms = [
{
title: "Something",
attributes: ["title", "firstname", "lastname", "address"],
values: [] //here i want the values from the attributes
},
{
title: "Something else",
attributes: ["title", "name", "job", "address"],
values: [] //here i want the values from the attributes
}
];
$scope.haha = function(){
console.log($scope.forms);
}
}

How to pre select value with "Select2"

I have read some post, but i can't get this to work! I'm trying to pre-select "2015" in "Select2", but nothing is selected!
As, a bonus i'd like help with switching the static dates, to "thisYear" and "pastYear". How should that JS look like together?
HTML
<!-- Select2 choose_year -->
<div>
<input type='hidden' class='col-md-2' id='choose_year' name='choose_year'>
</div>
JS
$(document).ready(function() {
$("#choose_year").select2({
data:[
{id:0,text:'2015'},
{id:1,text:'2014'}
],
val: ["0"]
});
});

Try the val() method
$("#choose_year").select2({
data: [{
id: 0,
text: '2015'
}, {
id: 1,
text: '2014'
}],
val: ["0"]
}).select2('val', 1);
Demo: Fiddle

Use checkbox to select item Angular JS

I want to be able to have a list of items and to select one using a checkbox:
<div data-ng-repeat="device in devices">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> {{ device.name }}
</label>
</div>
</div>
</div>
If this can be done using a custom directive that would also be cool!
So the idea, that when a checkbox is checked the device would go into an ng-model and all the other checkboxes would be disabled.
I have a feeling there needs to be a custom model created, something like:
devices = [{
name: "LED",
checked: false,
id: "98"
},{
name: "LED 2",
checked: false,
id: "8"
},{
name: "LED 3",
checked: false,
id: "78"
}]
Just need some function to fire each time one checkbox is checked.
I expect that it can be done with a ng-click on the checkbox? And a two way data binding on the model for canBeChecked
devices = [{
name: "LED",
checked: false,
id: "98",
canBeChecked: true
},{
name: "LED 2",
checked: false,
id: "8",
canBeChecked: true
},{
name: "LED 3",
checked: false,
id: "78",
canBeChecked: true
}]

Iterate over your collection and display a checkbox for each:
<div ng-repeat="device in devices">
<label>
{{ device.name }}
<input type="checkbox" ng-model="device.checked" ng-click="change(device)">
</label>
</div>
Note that the checkbox also has the ng-click directive. This is what you want to trigger each time a checkbox is clicked. The triggered function clears all checkboxes and only checks the clicked one. The checkboxes should now behave like radio buttons.
Your controller might look like this:
app.controller("MyCtrl", ["$scope", function($scope) {
$scope.devices = [{
name: "LED",
checked: false
}, {
name: "LED 2",
checked: false
}, {
name: "LED 3",
checked: false
}];
$scope.change = function(device) {
angular.forEach($scope.devices, function(item) {
item.checked = false;
});
device.checked = true;
};
}]);
It is not necessary to create the canBeChecked property you mention.
Here's the full working example: http://jsfiddle.net/zxdr8/

If you must use checkboxes, here is how you would do it.
Markup:
<div data-ng-repeat="device in devices">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="device.checked" ng-change="checkDevice(device)"> {{ device.name }}
</label>
</div>
</div>
</div>
Controller:
$scope.devices = [{
name: "LED",
checked: false,
id: "98"
},{
name: "LED 2",
checked: false,
id: "8"
},{
name: "LED 3",
checked: false,
id: "78"
}];
$scope.checkDevice = function (device) {
for (var i = 0, len = $scope.devices.length; i < len; ++i) {
if ($scope.devices[i] !== device)
$scope.devices[i].checked = false;
}
});

Your checked and canBeChecked properties seems like merely an UI thing. In my opinion, you should not be creating a custom data models and duplicating unnecessary properties just to do that. Believe me, I did things like that too when started using Angular, but there are much better ways.
Consider storing selected data in other location (model, service, controller, whatever). And maybe if you can store just an ID (primitive property), you can do your "checkbox-radio-like-element" like this:
<div ng-repeat="device in devices">
<label>
<input type="checkbox" ng-true-value="{{device.id}}" ng-false-value="" ng-model="some.storage">
{{device.name}}
</label>
</div>
And thats all you need, no background code needed. When Angular team implements interpolation support for ngTrueValue and ngFalseValue directives, you will be able to store the whole objects and reset model to e.g. null.