Get value from select angularJs and Firebase - javascript

I am currently working on a CRM in angularJs and Firebase, but I need to get the variable from an ng-repeat such follows
<select class="form-control" id="sel1">
<option value="">--Choose an Account--</option>
<option class="dropdown" value="{{contact.account}}" ng-repeat="account in accounts">{{account.name}}</option>
</select><br />
Controller
$scope.addConct = function () {
var account = $scope.contact.account;
The accounts.name is working fine, it shows all the accounts. How can I get that account string and assign that String to my contact.account?
Thanks in advance.

Just add the ngModel directive to the select field to bind the value to a scope variable:
HTML
<select class="form-control" id="sel1" ng-model="someVariable">
<option value="">--Choose an Account--</option>
<option class="dropdown" value="{{contact.account}}" ng-repeat="account in accounts">{{account.name}}</option>
</select><br />
Controller
$scope.someVariable = '';
$scope.addConct = function () {
var account = $scope.contact.account;
};
Now you can access the value at any time with $scope.someVariable
More information on ngModel

Related

How to set value in multiple select option in FORM in AngularJS?

Hmtl:
<div class="form-group">
<label for="loaisanpham">Loại Sản Phẩm</label>
<select class="form-control" name="idLoaisp" id="idLoaisp" ng-model="idLoaisp" ng-required=true>
<option ng-repeat="loaisanpham in loaisanphams | orderBy: 'tenLoaisp'" value="{{loaisanpham.idLoaisp}}">{{loaisanpham.tenLoaisp}}</option>
</select><br>
</div>
<div class="form-group">
<label for="phuong">Phường</label>
<select class="form-control" name="idVungxa" id="idVungxa" ng-model="idVungxa" ng-required=true>
<option ng-repeat="vungxa in vungxas | orderBy: 'tenVungxa'" value="{{vungxa.idVungxa}}">{{vungxa.tenVungxa}}</option>
</select><br>
</div>
JavaScript:
document.getElementById("idLoaisp").value = track.loaisanpham.idLoaisp;
document.getElementsById("idVungxa").value = track.vungxa.idVungxa;
Just idLoaisp show value in html and idVungxa not show.
I do not understand why it is not displayed. Help me. Tks all
Assign your value to the $scope in your controller.
$scope.idVungxa = track.loaisanpham.idLoaisp;
In plain HTML5 you would set the option as "selected":
like this:
<select multiple>
<option value="a">a</option>
<option value="b" selected>b</option>
<option value="c" selected>c</option>
</select>
There might be a different way to do it in Angular, but if this helps, you can use
<option [attr.selected]="boolean" ...
Remove the attribute "value" in the html options and set the value to the model, you have ng-model="idLoaisp" and ng-model="idVungxa" in the view so I guess in your controller you have that variables to store the values of the item selected, models are double binding that means you can also set the value to that model.
$ctrl.idLoaisp = track.loaisanpham.idLoaisp
$ctrl.idVungxa = track.vungxa.idVungxa

How to get dependable drop down using web api in angular js?

This is my html code
<body ng-controller="myController">
<select ng-change="getData(currentSelected)" class="form-control" id="selection" ng-model="currentSelected" ng-options="selection as selection for selection in data">
<option value="" selected>Select the bankname</option>
</select>
<select ng-change="getData(currentSelectedstate)" class="form-control" id="selection" ng-model="currentSelectedstate" ng-options="my.state as my.state for my in newdata">
<option value="" selected>Select the state</option>
</select>
<select ng-change="getData1(currentSelecteddistrict)" class="form-control" id="selection" ng-model="currentSelecteddistrict" ng-options="my.district as my.district for my in data1">
<option value="" selected>Select the district</option>
</select>
</body>
And my js code is
var app=angular.module("mainApp",[]);
app.controller("myController", ["$scope", "$http",function ($scope,$http){
$http.get("company.in/ifsc/banklist").then(function(response){
$scope.data=response.data[0].data;
});
$scope.getData = function(name){
$http.get("company.in/ifsc/state/" +name).then(function(response) {
$scope.newdata = response.data;
});
}
$scope.getData1= function(name1){
$http.get("company.in/ifsc/district/""+name+", +name1).then(function(response) {
$scope.data1 = response.newdata;
});
}
}]);
First two api are working fine, When i select particular state in second drop down its not taking the value , How to append fetched bankname and state to the third api? so that i get the list of district in the third drop down.... , can anyone please help?

How can i set auto selected value in angularjs

i am getting a value in json andand want to put that value in selectbox html auto sleceted that in angularjs how can i do this?
Here is my html code
<select class="form-control" name="comregtype" ng-init="users.comregtype" id="comregtype" ng-options="c.name for c in colors" >
<option ng-selected="users.comregtype" ></option>
<option>Company Registration Type</option>
<option>Proprietor</option>
<option>Partnership Firm</option>
<option>LLP</option>
<option>Pvt. Ltd. Co.</option>
<option>Ltd. Co.</option>
</select>
JS: $scope.users = {comregtype:response.comregtype}
i am gettting value in response.comregtype = "LLP"
How can i set this as seleceted value in selecetbox.
if anyone can help .
Thanks
You can do this,
<select ng-model="value" ng-init="value='LLP'" ng-options="mode.value as mode.value for mode in types.RegistrationType">
</select>
DEMO

How to save name of select option instead of value

I have this code:
$("#subscription").on('change', function(){
$('#plan').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="bank_name" class="form-control input-md chosen-select" id="subscription">
<option value="">Choose Bank</option>
<option value="swiftbank1">bank 1</option>
<option value="swiftbank2">bank 2</option>
</select>
<input type="text" id="plan" class="form-control input-md" name="swift">
What it does is add swift code in to the input field, that works fine!
Problem is that when I add data on database then both values is what I choose example I choose bank 1 then both will be saved as swiftbank1 .
I need it to save bank name (bank 1) and swift (swiftbank1) in database.
I understand that value is what it is but is it possible to add name in database instead of value? In this case this value works to be passed from selection to input.
Thanks
You can use .text for getting selected text.
$("#subscription").on('change', function(){
var text = $("#subscription :selected").text();
var value = $("#subscription").val();
console.log(text); // this will print text
console.log(value); // this will print value
//var plan = $('#plan').val(text); // this will change the value of plan
$("#plan").attr("value",text); // this will add the value attribute
$('#plan').val(text); // this will change the value of plan
$('#subscription :selected').val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select name="bank_name" class="form-control input-md chosen-select" id="subscription">
<option value="">Choose Bank</option>
<option value="swiftbank1">bank 1</option>
<option value="swiftbank2">bank 2</option>
</select>
<input type="text" id="plan" class="form-control input-md" name="swift">
try this to get text of selected option
$("#subscription").on('change', function(){
$('#plan').val(this.options[this.selectedIndex].text);
});
Since you will need to pass the value to store in database so a quick way is to keep the value as swiftbank1###bank1
Split the string with ### on server end and store them separately like this:
$selectValue = $_POST['select_name'];
$valueArray = explode("####",$selectValue);
$valueArray[0] will have swiftbank1 and $valueArray[1] will have bank1
use this $('#plan').val($('#subscription option:selected').text());

Using ng-model with Select2 is not updating the model value

I am using angular ng-model for select2 for data binding.
{{number.text}}
<select id="e2" ui-select2 ng-model="select2.text" data-placeholder="Pick a number">
<option value=""></option>
<option ng-repeat="number in range" value="{{number.text}}">{{number.text}}</option>
</select>
</div>
I am facing two issues here:
1) ng-change doesn't seem to be working, hence I had to use document.getElementByID..
2) value of select2.text is not getting updated here
function sampleController($scope,$timeout){
$scope.select2={text:"",id:""};
$scope.range=[{text:"name1", value:"id1"},
{text:"namea2", value:"id2"},
{text:"name3", value:"id3"}];
$timeout(function(){
$("#e1").select2();},10
)
document.getElementById("e1").onchange = function(){
$scope.select2.id = "selected";
}
}

Categories