Angular.js / Ng.select with ng.value - javascript

I have the following select:
<select selected="windows" ng-model="wdtype[4][$index]" id="inputEmail1" class="form-control">
<option>app1</option>
<option>app2</option>
<option>app3</option>
</select>
I want that every time that the user select option, the field inputName3 will be reflected. The field defines like this:
<input type="text" class="form-control" ng-model="wdname[4][$index]" id="inputName3" placeholder="Machine Name" disabled>
For example, the user select app1, so the name will be m-app1. If the user select app2, the name will be displayed: m-app2.
I don't see any trigger in angular which can help me in this case.

You can define values for options like this
<option value="m-app1">app1</option>
<option value="m-app2">app2</option>
<option value="m-app3">app3</option>
Or make it in a generic way. Define a function in scope that transforms selected value the way you need.
In controller:
$scope.getMachineName = function () {
if (wdtype[4][$index]) return '';
return 'm-' + $scope.wdtype[4][$index];
}
In template
<input type="text" class="form-control" value="{{getMachineName()}}"

Related

How to save selected option(dropdown box) in AngularJS

I want to save selected color value from dd box into $scope.color.
Index.html:
<label class="item item-select" name="selectName">
<span class="input-label">What is your favourite colour?</span>
<select id="colorid">
<option ng-repeat="x in colorList"{{x}}</option>
</select>
</label>
controller.js:
var colorCtrl = function($scope){
$scope.color = "";
$scope.colorList =["red","blue","yellow"];
console.info("color is "+$scope.color);
}
For binding value, use ng-model:
<select id="colorid" ng-model="color">...
for trigger event, use ng-change (calls $scope.onChange() ):
<select id="colorid" ng-model="color" ng-change="onChange()">...
And be careful to your options format! (it is the value which is binded, not the content!)
Full code:
<label class="item item-select" name="selectName">
<span class="input-label">What is your favourite colour?</span>
<select id="colorid" ng-model="color" ng-change="onChange()">
<option ng-repeat="x in colorList" value="{{x}}">{{x}}</option>
</select>
</label>
And JS:
var colorCtrl = function($scope)
{
$scope.color = "";
$scope.colorList =["red","blue","yellow"
];
$scope.onChange = function()
{
//trigerred on color change
console.info("color is "+$scope.color);
}
}
You aleady got many answers here.Just for add on i will suggest you to do this way:
<select style="background:{{color}}" ng-model='color' ng-options='color as color for color in colorList' ng-change='selectionChanged(color)'>
</select>
or you can also try with
<select ng-model='color' ng-change='selectionChanged(color)'>
<options style="background:{{color}}" ng-repeat="color as color for color in colorList" value={{color}}>
{{color}}</options>
</select>
First, there is a syntax error in your code.
In you want to take input from the DOM you have to tell angular which variable to store the input in.
This is done via the ng-model directive.
As given in the documentation.
The ngModel directive binds an input,select, textarea (or custom form
control) to a property on the scope using NgModelController, which is
created and exposed by this directive.
ngModel is responsible for:
Binding the view into the model, which other directives such as input,
textarea or select require.
Providing validation behavior (i.e.
required, number, email, url).
So, if I want to take input I will initialise the input element as,
<input type="text" ng-model="val" />
Via this, I have initialised a variable "val" on the scope (The Model) and I have told angular, whatever input is entered into the input element will be bound to that variable.
<label class="item item-select" name="selectName">
<span class="input-label">What is your favourite colour?</span>
<select id="colorid" ng-model="color">
<option ng-repeat="x in colorList">{{x}}</option>
</select>
</label>
Please check this example.

Javascript onchange function not working on select tag

I made 2 input fields and 1 select field and I applied onchange() function to select tag which calls javascript and that script make calculation and show it in other two fields
but it is not working for some syntax or logic reasons. please take a look at my code ,any help would be appreciated.
<html>
<head>
<script type="text/javascript">
function update() {
var x = document.getElementsByName("n_person").value;
document.getElementsByName("m_income").value= x*5;
document.getElementsByName("y_income").value= x*4;
}
</script>
</head>
<body>
<div class="elist"> <span class="b_text"><span>*</span>Level 1:</span>
// here is select tag where I put onchage function <select class="ifield" name="n_person" onChange="update()">
<option value="" selected="selected">Choose no. of person referred</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
// These are teh input where resultant value will appear <input type="text" value="" placeholder="Your weekly Income..." name="m_income" id="weekly_income" class="field" readonly required />
<input type="text" value="" placeholder="Your day Income..." name="y_income" id="day_income" class="field" readonly required/>
</div>
<!--elist-->
</body>
</html>
See this fiddle
Updated JS
function update() {
var x = document.getElementsByName("n_person")[0].value;
document.getElementsByName("m_income")[0].value = x * 5;
document.getElementsByName("y_income")[0].value = x * 4;
}
The problem with your JS was you was not targetting the correct HTML elements using getElementsByName.
Please read more about it here
The method getElementsByName returns, as its name indicates, a list of elements with the specified name and not just one. In your case, the names are unique to the document and the method will return a list with just one value, but you'll still need to index this list. Therefore, you must change this:
var x = document.getElementsByName("n_person").value;
to
var x = document.getElementsByName("n_person")[0].value;
Do this also for the other uses of getElementsByName and your code will work.

how do i make my onchange function generic?

My Javascript function checks for radio button selection and displays the appropriate drop down box. but this code is not generic, i tried using "this" but it doesn't help.. can this actually be generic?
CODE:
function change(s)
{
if(document.getElementById("viewstate").checked==true)
{
document.getElementById("state").style.display="inline";
document.getElementById("cat").style.display="none";
}
else
{
document.getElementById("state").style.display="none";
if(document.getElementById("viewcat").checked==true)
{
document.getElementById("cat").style.display="inline";
}
else
document.getElementById("cat").style.display="none";
}
}
Front end radio button
<input type="radio" name="viewrecord" value="viewstate" onchange="change('state')" required="" id="viewstate"> View by State
<select name="stat" id="state" style="display:none;">
<option selected disabled>Select State</option>
<input type="radio" name="viewrecord" value="viewcat" required="" onchange="change('cat')" id="viewcat">View By Agency
<select id="cat" name="che" style="display:none" required="">
You can try with this snippet
JS
document.addEventListener('click',function(event){
var tar = event.target.id;
if(tar ==="viewstate"){
document.getElementById("state").style.display="inline";
document.getElementById("cat").style.display="none";
}
else if(tar==="viewcat"){
document.getElementById("state").style.display="none";
document.getElementById("cat").style.display="inline";
}
},false)
WORKING COPY
What else I tried?
My primary idea was to add a class to next select tag. For example if you select radio#viewstate it will add a class to closest select element. Then just loop through all the select tag and whoever dont have this class , hide them.
But since you are using display:none nextSibling will not work.For why nextSibling wont work you can take a look at difference between it visibility:hidden
Also note in the demo that I have used label tag with input
If by generic you mean to make the function to be able to work for any similar selection process without depending on the hard-coded values of the selection inputs, this is one way I thought of doing it :
function change(selectorId, selectorClass) {
// Get all the selector elements you use.
var rS = document.getElementsByClassName( selectorClass );
// Out of the elements you fetched above, make the one with
// id = selectorId visible, rest hidden.
for(var i = 0; i < rS.length; ++i)
rS[i].style.display = (rS[i].id == selectorId) ? "inline" : "none";
}
In the HTML part add a class to every select input you want to use with the radio values:
<input type="radio" name="viewrecord" value="viewstate" onchange="change('state', 'record-selector')" required="" id="viewstate"> View by State
<select class='record-selector' name="stat" id="state" style="display:none;">
<option selected disabled>Select State</option>
<input type="radio" name="viewrecord" value="viewcat" required="" onchange="change('cat', 'record-selector')" id="viewcat">View By Agency
<select class='record-selector' id="cat" name="che" style="display:none" required="">
With this you can use the same function for similar selection process on different forms.

Display object information based on selected option

I'm using Angular for a SPA I'm working on. I have an array which contains objects for each user on my site. I have an ng-repeat to add all the users to my dropdown list. I'm trying to figure out how do I display specific user information in an input box based on the selected user from the drop down?
<select id="entityDropDown" ng-options="user.name for user in users" ng-change="userInfo(user)"></select>
<div>
<label for="entityId">ID: </label>
<input type="text" id="entityId" disabled ng-model="{{user.id}}"/>
</br>
<label for="entityDomain">Domain: </label>
<input type="text" id="entityDomain" disabled ng-model="{{user.domain}}"/>
</div>
app.controller('userCtrl',
function userCtrl($scope,siteCollection){
$scope.users = siteCollection.getUsers();
}
);
K I solved the issue.
First of all, this ng-model="{{user.domain}}" isn't how you use ng-model. I had to change them to remove the curly braces ng-model="user.domain".
I modified the select as such:
<select id="entityDropDown"
ng-model="selectedUser"
ng-options="user as user.name for user in users"
ng-change="userInfo(selectedUser)">
</select>
This is my controller function:
spApp.controller('userCtrl',
function userCtrl($scope,siteCollection){
$scope.users = siteCollection.getUsers();
$scope.selectedUser = {};
$scope.userInfo = function(user) {
$scope.selectedUser = user;
};
}
);
Basically the controller gets all my users and puts it in a user object. The select goes through each user and generates the options. When the selected option changes, the ng-change passes the selected user object to the userInfo function and the html populates with that objects information.
you can append ng-model="selectedUser" to your select and in your userCtrl
<!-- template.html -->
<select id="entityDropDown" ng-options="user as user.name for user in users" ng-model="selectedUser">
</select>
<div class="user-info" ng-show="selectedUser">
<p> {{selectedUser.name}}</p>
<!-- ... -->
</div>
in your controller
// controller.js
function userCtrl($scope, siteCollection){
$scope.users = siteCollection.getUsers();
$scope.$watch('selectedUser', function(oldVal, newVal) {
if (oldVal === newVal) return;
//do something like call JSON if need it
});
}
When the <select> changes the $scope.selectedUser changes to selected value. later you can use the selectedUser variable like holder for your show the info into other place like in the div.user-info or you can use $scope.$watch('selectedUser'... for fire other behavior like call a services or whatever
using your template
<select id="entityDropDown" ng-options="user in users" ng-model="selectedUser">
<!-- <option ng-repeat="user in users">{{user.name}}</option> -->
</select>
<div>
<label for="entityId">ID: </label>
<input type="text" id="entityId" disabled ng-model="selectedUser.id"/>
</br>
<label for="entityDomain">Domain: </label>
<input type="text" id="entityDomain" disabled ng-model="selectedUser.domain"/>
</div>

Validating Multiple Textbox Date with jQuery Validate

I'm trying to write a custom method to validate a date. The date however exists in three text boxes. Furthermore, there may be multiple instances of this date.
<div class="customDate">
<input class="month" id="dob_Month" maxlength="2" name="dob.Month" type="text" />
/
<input class="day" id="dob_Day" maxlength="2" name="dob.Day" type="text" />
/
<input class="year" id="dob_Year" maxlength="4" name="dob.Year" type="text" />
</div>
On submit, I'd like to validate any div containing the customDate class. I.e. make sure all boxes have been filled, make sure ranges are correct, etc. I'm using the following code:
$.validator.addMethod("customDate", function(element) { return false;}, "error message");
The validation function isn't firing however. What am I missing? Also, is there a better way to do this.
Note: I've stubbed out the functionality for the actual validation logic. I just need to know how to get the validation method to fire.
I have managed to create multiple field validation without use of a hidden field by following the guide at
http://docs.jquery.com/Plugins/Validation/multiplefields and amending it accordingly
might be overkill though :)
html code
<div class="whatever">
<!-- dob html -->
<div id="dobdate">
<select name="dobday" class="dateRequired" id="dobday">
<option value="">Day</option>
<option value="1">1</option>
</select>
<select name="dobmonth" class="dateRequired" id="dobmonth">
<option value="">Month</option>
<option value="January">January</option>
</select>
<select name="dobyear" class="dateRequired" id="dobyear">
<option value="">Year</option>
<option value="2010">2010</option>
</select>
<div class="errorContainer"> </div>
</div>
<br />
<div id="joinedate">
<!-- date joined html -->
<select name="joinedday" class="dateRequired" id="joinedday">
<option value="">Day</option>
<option value="1">1</option>
</select>
<select name="joinedmonth" class="dateRequired" id="joinedmonth">
<option value="">Month</option>
<option value="January">January</option>
</select>
<select name="joinedyear" class="dateRequired" id="joinedyear">
<option value="">Year</option>
<option value="2010">2010</option>
</select>
<div class="errorContainer"> </div>
</div>
<br />
<input name="submit" type="submit" value="Submit" class="submit" title="Submit"/>
</div>
jquery code
// 1. add a custom validation method
$.validator.addMethod("CheckDates", function(i,element)
{
// function with date logic to return whether this is actually a valid date - you'll need to create this to return a true/false result
return IsValidDate(element);
}, "Please enter a correct date");
// 2. add a class rule to assign the validation method to the relevent fields - this sets the fields with class name of "dateRequired" to be required and use the method youve set up above
$.validator.addClassRules({
dateRequired: { required:true, CheckDates:true}
});
// 3. add a validation group (consists of the fields you want to validate)
$("#myForm").validate(
{
submitHandler: function()
{
alert("submitted!");
},
groups:
{
dob: "dobyear dobmonth dobday", joined : "joinedyear joinedmonth joinedday"
},
messages: { dob : " ", joined : " " // sets the invidual errors to nothing so that only one message is displayed for each drop down group
},
errorPlacement: function(error, element)
{
element.parent().children(".errorContainer").append(error);
}
});
JavaScript code
function IsValidDate(_element)
{
// just a hack function to take an element, get the drop down fields within it with a particular class name ending with day /month/ year and perform a basic date time test
var $dateFields = $("#" + _element.id).parent();
day = $dateFields.children(".dateRequired:[name$='day']");
month = $dateFields.children(".dateRequired:[name$='month']");
year = $dateFields.children(".dateRequired:[name$='year']");
var $newDate = month.val() + " " + day.val() + " " + year.val();
var scratch = new Date($newDate );
if (scratch.toString() == "NaN" || scratch.toString() == "Invalid Date")
{
return false;
} else {
return true;
}
}
I would try triggering an event on form submit before the validation which appends the values from the individual day/month/year inputs together into a separate hidden input, and then validate the hidden input instead.
You add a hidden field
<input id="month" maxlength="2" name="month" type="text" />
<input id="day" maxlength="2" name="day" type="text" />
<input id="year" maxlength="4" name="year" type="text" />
<input id="birthday" name="birthday" type="text" />
then concatenate the values in the hidden, and validate that field.
$('#day,#month,#year').change(function() {
$('#birthday').val($('#day').val()+'/'+ $('#month').val()+'/'+ $('#year').val());
});
then validate the hidden value.
I'm pretty sure that the validation plugin only supports validating inputs, not arbitrary DOM elements. The elements function filters out anything that isn't an element as well as submit, reset, image buttons and disabled inputs.
What you'd want to do is have validators for month, day, and year. Month and day would need to reference each other's values in order to perform correct validation logic.

Categories

Resources