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

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";
}
}

Related

Sum dropdown values on AngularJS 4

I'm trying to make a page where the user will choose a few drop-downs, each option of each dropdown will have a number value. I want Angular to show the sum of all selected options and store on a variable or something so I can use it on an IF.
Here's the code I used as a workaround:
<select id="" [(ngModel)]="select1">
<option value="1">name1</option>
<option value="2">name2</option>
</select
<select id="" [(ngModel)]="select2">
<option value="1">name1</option>
<option value="2">name2</option>
</select
<b>Points: </b> {{ select1 -- select2 }}
However this does not store in any variable so I cannot use on an IF.
I want to do something like this:
<label *ngIf="summ > 16; else error">Higher than 16 </label>
Call a function with ngIf where it adds all the model variable values
<label *ngIf="calculatesum() > 16"; else error">Higher than 16 </label>
and in TS
calculatesum(){
return select1 + select2 +select3 + select4;
}

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

Javascript - return selected value of a select MVC6 taghelper element using a function

I am using ASP.NET core MVC6 so I'm using a select taghelper for the dropdown. This all works and I have a dropdown with states. As can be seen below there is a selected state.
In Javascript I wanted to get the selected value of this dropdown. I tried each of these:
var getSelectedState1 = function () {
return $State.val;
};
var getSelectedState2 = function () {
return $("#State").val;
};
..and both returned empty strings.
As "State" is the element ID of the state select element which I've identified both from Dave Paquette's blog and also from the page source...
<div class="form-group">
<label class="col-md-2 control-label" for="State">State:</label>
<div class="col-md-10">
<select class="form-control" data-val="true" data-val-required="A State name is required" id="State" name="State"><option value="NSW">New South Wales</option>
<option selected="selected" value="VIC">Victoria</option>
<option value="QLD">Queensland</option>
<option value="SA">South Australia</option>
<option value="WA">Western Australia</option>
<option value="TAS">Tasmania</option>
<option value="NT">Nothern Territory</option>
<option value="ACT">Australian Captial Territory</option>
</select>
<span class="text-danger field-validation-valid" data-valmsg-for="State" data-valmsg-replace="true" />
</div>
eg id="State".
Using a breakpoint and checking the value of "getSelectedState" I get an empty return for both attempts.
How do I populate a variable "getSelectedState" with the selected value of the dropdown using a function?
Note: Whilst this is aimed at Javascript people the problem might be in relation to the fact that its an MVC6 Taghelper element and I'm not accessing it correctly - this might be why its returning "" and not the javascript.

Get value from select angularJs and Firebase

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

Passing an ng-model value to an object

I have a list made with ng-repeat with options. I'm trying to make it so that when I click an option, the value of the selection will be passed to an object.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" >
<option value="1" ng-repeat="t in klas" ng-model="vakselect">{{ t.Name }}</option>
</select>
$scope.user = {
vak: klas.vakselect,
};
I have small experience with Angular, so I'm not sure how to make it work correctly.
Edit:
I have adjusted my code and user.vak does seem to catch the selectvak field, but now passes it as an array. How do I make it so it's a string in $scope.user? So whenever I log user, I will see a string of vak and then an array of students.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" ng-model="user.vak" ng-options="t.Name as t.Name for t in klas" ng-click="getJSON1()">
$scope.user = {
vak: '',
// klas: klasselect,
student: [$scope.student] -1
};
TLJ and Arnaud are correct.
But answering your initial question, in the select tag, instead of ng-model="vakselect" just use ng-model="user.vak".
Then, when the value of the select changes, the value of user.vak will change automatically.
real code is this : (and nothing to do inside the controller.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" ng-model="user.vak">
<option value="1" ng-repeat="t in klas">{{ t.Name }}</option>
</select>
And you should use ng-options instead of ng-repeat to create your options
https://docs.angularjs.org/api/ng/directive/ngOptions
This will add t.name to an array when you click the option. Take a look at the controller function and the ng-click in the partial.
<select id="selectvak" name="selectvak" class="form-control" multiple="multiple" >
<option value="1" ng-repeat="t in klas" ng-click="add(t.Name)" ng-model="vakselect">{{ t.Name }}</option>
</select>
var string_option;
$scope.add = function(t) {
string_option = t;
console.log(string_option )
}

Categories