setting Angular select ng-init to first value in array - javascript

I have a simple select element that I am trying to enforce a value being present to submit the form and I have tried both setting the required attribute as well as using ng-init to ensure there is a value selected and both fail.
I am using ng-options to create a list of values from an array of Objects that have a ref property. Then I would like to use ng-init to set the shown value to the first Object.ref in the array.
<select name="refmarker" class="input-block-level form-width-adjust" ng-model="model.refmarker" ng-options="rm.ref for rm in refmarkers" ng-disabled="editable" ng-init="model.refmarker='refmarkers[0].ref'" required></select>
I have tried the following without any luck
ng-init="model.refmarker='refmarkers[0]'"
ng-init="model.refmarker='refmarkers[0].ref'"
ng-init="model.refmarker='rm.ref'"
Also the required attribute doesn't work ? Is the angular select element buggy or am I doing something wrong?

required will only work in side a form element.
What you want is ng-init="model.refmarker=refmarkers[0]"
<!doctype html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script type="text/javascript">
angular.module('app',[])
.controller('Main',function($scope)
{
$scope.model = {};
$scope.refmarkers = [{ref:'abc'},{ref:'def'},{ref:'ghi'}];
});
</script>
</head>
<body ng-controller="Main">
{{'Angular'}}
<select ng-model="model.refmarker" ng-options="rm.ref for rm in refmarkers" ng-init="model.refmarker=refmarkers[0]"></select>
{{model.refmarker}}
</body>
</html>

Related

Why can't I have two ng-app directives in a given HTML page - AngularJS?

I get the output only if I remove one of the directives i.e. ng-app - demo1 and the models. Why I can't have two ng-app working at the same time. I am new to Angular JS and building up my fundamentals. I get the desired output if I run one directive at a time. So, in this example if I remove the demo ng-app, scripts and controller, I get the desired output. If I remove the demo1 ng-app scripts and controller, I get the first part working fine. How can I get both the directives working at the same time?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<h1> Guru99 Global Event </h1>
<script src="lib/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-3.2.1.js"> </script>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name: <input type="text" ng-model="tutorialName"> <br>
<br>
This tutorial is {{tutorialName}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope)
{
$scope.tutorialName = "Checking Angular JS" ;
}
);
</script>
<div ng-app="DemoApp1" ng-controller="DemoController1">
<! behaviour >
{{fullName("Guru","99")}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp1', []);
app.controller('DemoController1',function($scope)
{
$scope.fullName=function(firstName, lastName)
{
return firstName + lastName;
}
});
</script>
</body>
</html>
The output is
Guru99 Global Event
Tutorial Name:
This tutorial is Checking Angular JS
{{fullName("Guru","99")}}
From the Docs:
There are a few things to keep in mind when using ngApp:
only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
— AngularJS ng-app Directive API Reference

new version of FF changed order for attributes in input

I have expected that order for atributes in elements can be changed despite the order in html (only FF 43.0.1). Example:
<input type="checkbox" data-type="can-be-also-empty"/>
Please, run snippet in Chrome an then in FF.
Result from devtools:
<input data-type="can-be-also-empty" type="checkbox"/> - FF
<input type="checkbox" data-type="can-be-also-empty"/> - Chrome
This can be affected with using angular. Custom directives guide
Angular normalizes an element's tag and attribute name to determine which elements match which directives
The normalization process is as follows: Strip x- and data- from the front of the element/attributes.
Thats why i think, if data-type atributes going first in element, angular stripping data- and it affecting type="checkbox" to type="can-be-also-empty".
Next snippet can show better, what i mean:
angular.module('app', []).directive('example', function(){
return {
template: '<input type="checkbox" data-type="eny-value" ng-model="value"/><p>{{value}}</p>',
restrict: 'E',
link: function($scope){
$scope.value = false;
}
}
})
<!DOCTYPE html>
<html ng-app='app'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<example></example>
</body>
</html>
Also try to run it in FF and Chrome, expression will not be evalueted in FF.
Next step, to move data-type="eny-value" before type. Now it is not working in any browser.
The problem comes from how AngularJS matches directives. In this particular case, it's about input[checkbox] it's matches comes from the type attribute. According to AngularJS docs for directives, it can be matched from both type and data-type, so when angular normalize the data-type, depending on the order of the attributes, it overides de previous value (aka checkbox).
This behaviour causes input[checkbox] to never work as expected, so then ngModel never receives a value of the checked field.
The best approach is to not use such thing, don't use attributes that matches with angularjs normalization.

How to communicate from secornd page to first page usin javascript?

I have a requirement where i have to show the selected dropdown option from first page to second page of application.
I have tried to write FirstPage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First page</title>
</head>
<body>
<div class="abc">
Dropdown: <select id="ddlViewBy" onchange="fun()">
<option value="1">select</option>
<option value="2">test1</option>
<option value="3">test2</option>
<option value="4">test3</option>
</select>
<p>selected option is :<b id="abc"></b></p>
<button onclick="redirect()">Redirect</button>
</div>
<script>
function fun(){
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;
document.getElementById("abc").innerHTML=strUser;
}
function redirect(){
var linkToSeconPage="http://localhost:63342/test/SecondPage.html";
window.location.href=linkToSeconPage;
}
</script>
</body>
</html>
and the SecondPage.html where i need to access strUser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>second page</title>
</head>
<body>
<div>here i want to access the selected dropdown value from first page</div>
</body>
</html>
Could you please throw some light on the approach to use strUser to SecondPage.html.
And also the window.location.href=linkToSeconPage; is not working in firefox.
I have also tried window.location=linkToSeconPage; , window.location.assign(linkToSeconPage); and using return false; after this after searching on google for answer but nothing worked in firefox but everything worked on IE 11.
Could you also suggest alternative for this using in firefox.
Thanks in advance.
location.assign(url) and location = url are equivalent and supported in FireFox. Try leaving off window.
Appending a value to the querystring as suggested by #Sam is not a bad option. Another option, which can be useful in more complex situations - or when you don't want to expose the selected value in the querystring (the value will be stored in logged files), is to use SessionStorage. In first page, add
sessionStorage.setItem('SELECTED', strUser);
And on page, you can retrieve with
sessionStorage.getItem('SELECTED');
SessionStorage stores the value in the browser for the lifetime of the user's current session. The token/key (SELECTED in my example, but can be any text) is scoped to the domain; thus other websites can't read the data that you place into SessionStorage.
Pass the value to the second page using a get parameter e.g.
window.location.href=linkToSeconPage + '?val=valueToPassThrough';
Then on the second page use:
var theValue = window.location.href.split('?')[1].split('=')[1];
However note that this will not take into account other get parameters passed to the page and in this respect it is fragile.
This is a very manual way of doing it and you would probably want to write a function which extracts this exact behaviour for you - and of course checks for problems with split - the above code assumes there is a ? in the URL and the argument required is the first one.

How to modify the value of text input with js/jquery?

I would like to dynamically modify the values of certain form elements, more specifically certain input text fields. So far, whenever I load my html page, I am just getting the blank input field, but I am expecting it to contain the value of 1. Here is an example of how I am trying to do this.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myForm = $(this).getElementById('form1');
myForm.elements['Q01'].value = '1';
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
The reason this needs to be done dynamically is because the value of form could be different every time. Am I even approaching this correctly? Suggestions on how I can achieve my intended functionality?
-- EDIT --
None of the solutions seem to be doing the trick. Here is an update of my code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$("#Q01").val("1");
$("#form1 input[name='Q01']").val("1");
//$("input[name='Q01']").val('1');
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
I am expecting when I load the page, that the input text will have 1 in it. But the input text keeps showing up empty. Any ideas?
-- EDIT --
Here is a solution derived from the answers from below that I like:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#Q01").val("1");
});
</script>
</HEAD>
<BODY>
<form id="form1">
<input type="text" id="Q01" name="Q01" maxlength="1" />
</form>
</BODY>
</HTML>
If you are using jQuery you could just change the id attribute to name in the input elements and then do something like this:
$('#Q01').val('1')
The val method sets the value sou can find more here: http://api.jquery.com/val/
You've got your ready handler correct. One of the great things about jQuery is its selector engine. I recommend taking a look at the documentation to help familiarize yourself with it.
To do what you want, I'd recommend something like this:
$(document).ready(function() {
$("#form1 input[name='Q01']").val("1");
});
The #form1 is the same as document.getElementById("form1"). The input[name='Q01'] grabs all input elements that have a name attribute equal to Q01. The .val method sets the selected elements value to the string 1.
$(document).ready(function(){
$("form input[name='Q01']).val('1');
)};
This should work:
$("input[name='Q01']").val('1');
But why not to set id's to your inputs?
Hope it works

looping through elements with jQuery based on name attribute rather than id

Thanks for taking the time to read this.
I have an unknown number of (dynamically inserted) input elements in a form, to each of which I want to attach the datepicker widget included in jQuery UI.
All of the input elements that I want to attach the datepicker to have a class of "date-pick". Obviously because we have more than one matching element we need more than just a class name so that the date value gets returned to the originating field rather than just the first match.
Ordinarily I'd probably just do something like:
$("input.date-pick").each(function(){
$(this).datepicker({dateFormat: "yy-mm-dd"});
});
However in the code I'm working with, the input elements do not have unique IDs until the form data is saved (something that I'm unable to change), though they do have unique name attribute values of the format name="field_id_x[y][z]" which, when the form is saved then gets converted to an id of the format id="field_id_xyz".
So my question is, can anyone show me how to loop through all the input elements with a class of "date-pick" based on their name attribute values?
(PS It might also be worth mentioning that the number of matching input elements in the form can be increased/decreased by the user on the fly.)
Your code should work as it is. However, you could loop through by name like this:
$("input[name*='field_id_'].date-pick").each(function(){
$(this).datepicker({dateFormat: "yy-mm-dd"});
});
The date picker doesn't need the elements to have an ID. You're already looking up the elements for it. This should work:
$('input.date-pick').datepicker({dateFormat: "yy-mm-dd"});
Note you don't even need the each call.
Complete example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DatePicker Test Page</title>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
<script type='text/javascript'>
$(function() {
$('.dp').datepicker();
});
</script>
</head>
<body>
<hr />
<input class='dp' type='text'>
<input class='dp' type='text'>
<input class='dp' type='text'>
</body>
</html>
have you tried something like
var namefield = "field_id_"
$("date-pick").each(function(index, element) {
if ($(element).attr("name").substr(0,namefield.length) == namefield) {
// code to process
}
});

Categories