Learning more about AngularJS everyday.
A style contains style.StyleID,style.StyleName,style.EncryptedValue
I have the following code:
<select data-ng-model="StyleID"
data-ng-options="s.StyleID as s.StyleName for s in styles"
data-ng-change="GetOptions()">
<option value="">--Select Style--</option>
</select>
I need to pass EncryptedValue into GetOptions() e.g (GetOptions(EncryptedValue)) or be able to access something like SelectedStyle.EncryptedValue
How do I go about doing that?
UPDATE
Changed my code to:
<select data-ng-model="style"
data-ng-options="s.StyleID as s.StyleName for s in styles"
data-ng-change="GetOptions()">
<option value="">--Select Style--</option>
</select>
My Controller:
$scope.GetOptions = function ()
{
alert($scope.style);
}
alert($scope.style); returns a string of the StyleID
alert($scope.style.StyleID); returns undefined
What is going on ???
Note: styles is loaded via AJAX call (JSON result).
You might have to rework how you handle things in your controller but you can change your model to this:
<select data-ng-model="selectedStyle"
data-ng-options="s as s.StyleName for s in styles"
data-ng-change="GetOptions()">
<option value="">--Select Style--</option>
</select>
Then in your controller, you can do this
$scope.GetOptions = function(){
console.log($scope.selectedStyle.EncryptedValue)
};
The only thing is now if you want to reference your StyleId you have to do it this way:
$scope.selectedStyle.StyleId
Related
my multi-select selection is only giving the output as my first selection. I'm sending the data to firebase, and only the first selection is reflected there. For example, if I select (energy, health care, real estate) in my firebase it only shows energy.
Here is my HTML code:
<select name="Sector" value="sector" id="interested_sector" class="selectpicker" multiple="multiple" data-live-search="true">
<option value="">Sector</option>
<option value="energy">Energy</option>
<option value="materials">Materials</option>
<option value="consumer discretionary">Consumer Discretionary</option>
<option value="consumer staples">Consumer staples</option>
<option value="health care">Health Care</option>
<option value="financials">Financials</option>
<option value="information technology">Information Technology</option>
<option value="telecommunication services">Telecommunication services</option>
<option value="utilites">Utilites</option>
<option value="real estate">Real Estate</option>
</select>
Here's is the snippet of code in my .js file that sends data to realtime database
var interested_sector = getInputVal('interested_sector')
function getInputVal(id){
return document.getElementById(id).value;
}
function saveUserInfo( interested_sector){
firebase.database().ref('User_info/'+id).update({
interested_sector: interested_sector,
}).then(() => {
window.location = //it goes to a different html page;
})
}
A firebase RealTime Database is made up of JSON Objects, when you get the Values from the input, make sure they return in proper format, here, you seem to be updating an existing key that is called interested_sector and adding value health, energy etc to it. As Realtime Database accepts JSON, what you send has to be a proper JSON, that is where your code is breaking the value and probably taking the first number, you need to run through all the values taken in and decide in what format do you want to store them?
for example:
{
interested_sector: {
1: 'health',
2: 'energy'
}
}
or
{
interested_sector: "health, energy"
}
as you can see both are working options, but you need to parse the values first before you send them for an update.
So after testing your code, it turns out that interested_sector value changes everything you select a new value, it replaces the old value, that is why when you update the field in firebase database, it only shows the latest of the values,
so for example:
if you select 'Energy' and hit the button to save info, it will save 'Energy'
and then you click on 'Materials' and hit the button to save the info, the interested_sector value gets changed and replaces the old value and the function to save the info changes the firebase value as well.
solution is to add a local var that keeps the value and keeps on appending them interested_sector += new value and use a separator like ',' or ';'.
so the correct code of the above, should be something like this:
<!DOCTYPE html>
<html>
<body>
<select name="Sector" value="sector" id="interested_sector" class="selectpicker" multiple="multiple" data-live-search="true">
<option value="sector">Sector</option>
<option value="energy">Energy</option>
<option value="materials">Materials</option>
<option value="consumer discretionary">Consumer Discretionary</option>
<option value="consumer staples">Consumer staples</option>
<option value="health care">Health Care</option>
<option value="financials">Financials</option>
<option value="information technology">Information Technology</option>
<option value="telecommunication services">Telecommunication services</option>
<option value="utilites">Utilites</option>
<option value="real estate">Real Estate</option>
</select>
<button onclick="getCalled()">Get Called</button>
<script>
var final_val = "";
function getInputVal(id) {
return document.getElementById(id).value;
}
function getCalled() {
var interested_sector = getInputVal('interested_sector');
final_val += interested_sector + ', ';
console.log(final_val);
alert(final_val);
}
</script>
</body>
</html>
FYI: firebase's update function doesn't append to the old value, it changes only the specific fields that you want to change and keeps all the other fields the same. unlike ref().set() function which completely rewrites the entire json object
This may be a simple thing, but I am trying to capture the selected value from a drop down list on an JSP page and use the selected value as an argument to a method. I am able to use the onchange event in the select tag to call a java script function and capture the value but I am not sure how to send the value to the method. I think there is a way to do this via an ajax based call but I am not sure how to accomplish this. Here is a sample of the test code I am using. Thank you.
function getSelected()
{
var selectedSource = document.getElementById("myselect").value;
console.log(selectedSource);
}
<select name="myselect" id="myselect" onchange="getSelected();">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
I edited the answer to include the post to the server using jQuery.
There are two errors in your javascript function:
First, you call getselected(), but the function name is getSelectedSource();
Second, you try to find sourceSystem, but your id is myselect.
Make a HTTP Post using jQuery and send a parameter myselect, for example, with value selectedSource.
In your servlet, you can get this parameter using request.getParameter("myselect")
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
function getSelected()
{
var selectedSource = $("#myselect").val();
console.log(selectedSource);
$.post("test", { myselect : selectedSource},
function(data) {
alert("Data Loaded: " + data);
});
}
</script>
<select name="myselect" id="myselect" onchange="getSelected();">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
I have a select tag in my html code like this:
<select ng-model="brandList" name="brandList" style="width:110px;" >
<option value="" selected>---Please select---</option>
<option ng-repeat="item in brandnameList | unique:'brandname'" value="{{item.brandname}}" style="width:50px;"> {{item.brandname}}</option>
</select>
The values in my select was fetched from the database via API and the code goes like this.
adminService.getbrandnameList()
.then(function(data){
$scope.brandnameList = data.data;
$scope.brandn=data.data[0].brandname;
});
I have another function that needs the selected value on the select tag
$scope.ExportmodalAdmin = function () {
alert( $scope.brandList )
}
But the model for the select which is $scope.brandList returns an undefined value. How can I fix this? I need the value from the select tag to be passed on the function.
Hope you have defined the variable brandList in your controller.
$scope.brandList = {};
Also, Change your ng-repeat statement as below:
<select ng-model="brandList" name="brandList" ng-options="item.brandname for item in brandnameList" style="width:110px;" ng-change="alertChange()" >
<option value="" selected>---Please select---</option>
</select>
Controller code to check change:
$scope.alertChange = function(){
alert($scope.brandList.brandname);
};
look at plunker reference here plunk
I am trying to show different data from a large data object based on selections made in view via a select box. I am populating the data like this
$scope.displayData = $scope.dataObj[$scope.selectedType][$scope.networkType];
And I have ng-model on my select options.
<select ng-model="networkType">
<option value="networkOne">One</option>
<option value="networkTwo">Two</option>
<option value="networkThree">Three</option>
</select>
<select ng-model="selectedType">
<option value="typeOne">One</option>
<option value="typeTwo">Two</option>
<option value="typeThree">Three</option>
</select>
I initialize both of these variables
$scope.selectedType = 'individual';
$scope.networkType = 'inNetwork';
And the $scope.displayData is initially correct. However when I change the drop downs, the displayData does not change its values to access the new data. I am not sure what step I am missing here.
I think you should update the display data using ng-change event.
Add a update function in your controller
$scope.updateDisplay = function() {
$scope.displayData = $scope.dataObj[$scope.selectedType][$scope.networkType];
};
Add ng-change for your <select> element
<select ng-model="networkType" ng-change="updateDisplay()">
<option value="networkOne">One</option>
<option value="networkTwo">Two</option>
<option value="networkThree">Three</option>
</select>
<select ng-model="selectedType" ng-change="updateDisplay()">
<option value="typeOne">One</option>
<option value="typeTwo">Two</option>
<option value="typeThree">Three</option>
</select>
Or do it with $scope.$watch.
The $scope.watch() function creates a watch of some variable. When you register a watch you pass two functions as parameters to the $watch() function:
A value function
A listener function
The first function is the value function and the second function is the listener function.
The value function should return the value which is being watched. AngularJS can then check the value returned against the value the watch function returned the last time. That way AngularJS can determine if the value has changed.
In my example, we are setting up a watch on both networkType and selectedType models. And instead of it being a funtion we simply put the $scope model name.
$scope.$watch('[networkType,selectedType]', function(newValues, oldValues) {
$scope.displayData = $scope.dataObj[newValues.selectedType][newValues.networkType];
});
Add this method to your controller
$scope.onChnage = function () {
$scope.displayData = $scope.dataObj[$scope.selectedType][$scope.networkType];
}
Html
<select ng-model="networkType" ng-change="onChnage ()">
<option value="networkOne">One</option>
<option value="networkTwo">Two</option>
<option value="networkThree">Three</option>
</select>
<select ng-model="selectedType" ng-change="onChnage ()">
<option value="typeOne">One</option>
<option value="typeTwo">Two</option>
<option value="typeThree">Three</option>
</select>
Beside $watch and ng-change, if you just want to display the data in displayData variable, another option is to convert it to a function display():
$scope.display = function () {
return $scope.dataObj[$scope.selectedType][$scope.networkType];
};
and in the view:
{{display()}}
this function will be called again whenever selectedType or networkType change
I am trying to get the option value when user selects a option in Angular way. I have something like'
<div ng-controller="test">
<select ng-model="selectedProduct" ng-options="product.name for product in products">
<option value="">Please select a product</option>
</select>
</div>
In my js
app.controller('test', function ($scope, $http, $modal) {
console($scope.selectedProduct) -> undefined.
})
I want to get the selected value when user makes a selection. Can anyone help me about it? thanks a lot!
You can use ngChange to fire an event whenever the value changes in the view:
<select ng-model="selectedProduct" ng-options="product.name for product in products"
ng-change="doSomething(selectedProduct)">
<option value="">Please select a product</option>
</select>
app.controller('test', function ($scope, $http, $modal) {
...
$scope.doSomething = function (product) {
// Do stuff with product
};
See, also, this short demo.
Try this:
<select ng-model="selectProduct" ng-options="option.id as option.name for option in options" ></select>
Secondly, where is your products in your controller?
Here is an example of this working. You should define a default value within your controller's $scope to ensure the value is defined. From there it is easy to access the model via {{ myproduct }} or $scope.myproduct depending on where it is being accessed.