Develop Reference

AngularJS + dropdown menu is not getting its default value "select..." assigned

I gather data to populate a dropdown from calling an API method. Getting the data works.
My issue occurs when I am trying to assign a meeting id that does not have a match in the returned list. In this instance, I want to display the dropdown with all the meetings available, but at the top and displaying a simple text that reads: "Select Meeting".
I am not sure what I am doing wrong but all I get to achieve is to have the dropdown with the values, but the first option blank, then the second option is "Select Meeting", I am not sure how to force the "Select Meeting" option to the top of the list, when we could not match the passed meeting id parameter.
URL:
http://localhost:51225/bla/bla/?meetingid=50985&email=myemail#.com
AngularJS Controller Code:
$scope.fetchList = function() {
$http({
method: 'GET',
url: '/bla/bla/bla/method',
data: {}
}).then(function(res) {
$scope.MeetingList = res.data.data;
}, function(error) {
$scope.Message = 'An error occurred, please try again';
});
HTML:
<select id="meeting-list" ng-model="selectedMeeting" ng-change="GetValue()">
<option value="">-Select Meeting-</option>
<option ng-repeat="meeting in MeetingList" value="{{meeting.MeetingID}}">{{meeting.MeetingName}}</option>
</select>
Does anyone have a recommendation how to work this around?
Thank you.

Retrieve selected option from database and present as selected Angular JS

I have a select like this:
<select class="form-control" ng-hide="Catalogos.length==0" ng-change="filtro(selected)" ng-model="selected" ng-options="item.Nombre for item in Catalogos "></select>
and it Charge it with Angular Controller like this:
function cargarCatalogo() {
apiService.get("../../api/Catalogo/GetCatalogoPadre/" + $scope.Catalogo + "/",
null,
function(res) {
$scope.Catalogos = res.data;
$scope.selected = $scope.Catalogos[0];
$scope.filtro($scope.selected);
},
errorCatalogo);
}
So I have two different context with same view: Create and Edit. If $scope.catalogoid come null I present a Create View and it come with value is an Edit View.
Problem is into Edit View, I want to present a select of actual value of Id instead first value. How can I do that?

Ng-init in the selection for default value with AngularJS doesn't work

In web app I have a list of Expenses, which that if you press above it takes you to a new page to edit the selected Expense. When the user click on an element of list, I save the Object (the selected Expense) in a Global Object common in whole application and I retrieve it when I am in the Editing controller:
$scope.companySelected = GlobalApplicationData.selectedExpenseList;
The GlobalApplicationData.selectedExpenseList is an Object:
$$hashKey: "object:39"
_id: "33aa5549-7802-40d9-bc89-8780705b8c9b"
_rev: "3-eb940cb990524112723f711618e0cf51"
ad_table_id: 1000596
company_name: "Company 1"
data: Object
recordid: 1000005
__proto__: Object
In one expense there is only one company.
So, in this page of editing I have some field (input type text, date, etc). And I also have a selection with the list of the Companies of the logged user. To retrieve that list, I made this function:
$scope.getCompanyList = function() {
EditExpenseListSrv.getCompanyListDetail(user).then(function (companyListDetail) {
$scope.companyList = companyListDetail;
$scope.$apply();
}).catch(function (err) {
console.log(err);
});
};
CompanyListDetail is an array of Obejct:
companyListDetail: Array[5]
0: Object
1: Object
2: Object
3: Object
4: Object
And this is one example of those object:
_id: "44e620dc-e715-453f-882b-3f21aeef48fe"
_rev: "1-c09c9f3350e853e588f3358aaafc0374"
ad_table_id: 1000146
data: {
description: "text"
id_company: 513424
name: "Company 2"
}
recordid: 1000002
So the company of the selected Expense ($scope.companySelected) will definitely part of the list obtained by the query ($scope.companyList). But I want to give the user the possibility to change it.
So I would like to make a selection containing the list ($scope.companyList) and default already selected the Company corresponding to $scope.companySelected.
I've writter this, but it doesnt work:
<select class="selection" ng-model="companySelected"
ng-init="companySelected = globalApplicationData.selectedExpenseList"
ng-options="company
as company.data.name for company in companyList">
But it doesn't work. I can see in the selection all the Companies, but don't select the default value

When you are assigning a default value to the select, you need to assign the object, so it won't work, when assigned with the same data of some other object:
Note:
a) data is the array which is getting looped in the select list
b) selectedcountry is the model which is bind on select list.
Option 1:
Using ng-init:
<select ng-model="selectedcountry" ng-init="selectedcountry = data[0]" ng-options="item.name for item in data">
<option value="">Select</option>
</select>
Demo 1.
Option 2:
Assigning the default from the controller
$scope.selectedcountry = $scope.data[0];
Demo 2

You can try to do the initialisation in the controller:
$scope.companySelected = "the value that you want to set here"
Or you can try to put the ng-init inside the parent of the select. Once I had a problem like this and I solved it putting the ng-init in the parent tag. Example:
<div id="parent" ng-init="companySelected = globalApplicationData.selectedExpenseList">
<select ...>
</div>
Another idea would be to put companySelected inside an object. I have had some problems (I am not sure why) with the forms if I was using $scope.value inside the ng-value instead of using $scope.formData.value

C# Razor - Display comment where looped in value equals selectedIndex value

I have a select list that looks like this:
<select class="form-control">
<option>Select</option>
<option value="2">Order</option>
<option value="5">Delivery</option>
<option value="6">PickUp</option>
<option value="13">Quote</option>
</select>
Once a user selects an option, I would like to display a comment only where db_Type = the value of the selected option:
foreach (var note in Model.GetNotes)
{
<div class="current-note-container">
<h5 class="note-comment"><b>Description:</b><br/> #note.db_Comment.Where(note.db_Type == /* Selected Index */)</h5>
</div>
}
I'm not really sure how I can accomplish this using razor, or how to mix javascript in to get the job done.

This is not exact, but I'm think you're looking for something like this
<select class="form-control" onchange="GetComment(this.value)">
<option>Select</option>
<option value="2">Order</option>
<option value="5">Delivery</option>
<option value="6">PickUp</option>
<option value="13">Quote</option>
</select>
Add this to the script of your razor view
function GetComment(ID)
{
var parameters = {};
parameters["ListID"] = ID;
$.ajax
({
type: "GET",
data: parameters,
url: "/MyController/GetComment",
success: function (message) {
$('#note-comment').val(message);
},
error: function () {
alert("error");
}
});
}
And finally something like this to your controller
[HttpGet]
public JsonResult GetComment(int ListID)
{
return Json(Mylist[ListID].Comment);
}

Razor is a server side code and so you can not combine it with client script like what you are planning to.
Instead use jQuery to listen to the selection changed event and pass (GET/POST) newly selected value back to controller and query database and get the required comment.
jQuery inside View (pseudo code):
$( "#ddlOptions" ).change(function() { //assuming ddlOptions is the Id of select list
var selectedOptionId= $(this).val();
$.get('#Url.Action("ActionName","ControllerName")', { id: selectedOptionId},
//You can use $.get(...) or $.post(...) based on action method type.
function (data) {
//Display/append the comment received to a container(div/span etc)
});
});
Controller code (pseudo code)
public JsonResult Get(int id)
{
//Query database here based on id to get the comment
//e.g: db_comment.where(com=>com.id==id).FirstOrDefault();
return Json(comment,JsonRequestBehavior.AllowGet);
}
Hope this provide you some idea.

AngularJS - select option and use it in a function

I have a cshtml file in which i have following code (a dropdown with data taken from a model)
<div class="controls">
<select ng-model="model.CountryCode" ng-change="countryChanged({{country.ISO316613LetterCode}})">
<option ng-repeat="country in model.Countries" value="{{country.ISO316613LetterCode}}">{{country.CommonName}}</option>
</select>
</div>
And i have this function, in which i detect that a country was chosen from the dropdown
$scope.countryChanged = function(){
var countryDet = _.find($scope.model.CountryDetails, function(cd){
console.log("countryDet");
return cd.CountryCode === $scope.model.Country;
});
if(countryDet){
$scope.model.CountryDetail = countryDet;
// set business properties from country details
$scope.model.DateFormat = countryDet.DefaultDateFormat;
$scope.model.ShortDateFormat = countryDet.DefaultShortDateFormat;
$scope.model.DateFormatJs = countryDet.DefaultJsDateFormat;
$scope.model.LongDateFormat = countryDet.DefaultLongDateFormat;
$scope.model.TaxCode = countryDet.SalesTaxName;
$scope.model.Currency = countryDet.DefaultCurrencySign;
$scope.model.AccSoftwareDateFormat = countryDet.DefaultAccSoftwareDateFormat
$scope.model.WeightSystem = countryDet.DefaultWeightSystem
}
$scope.loadStates();
};
And another function, that should display additional dropdown on web, showing states if the country choosen was USA or AUstralia
$scope.stateVisible = function(){
if($scope.model && $scope.model.CountryDetail){
return $scope.model.CountryDetail.StateVisible;
}
return false;
};
My problem is, that i do not know how to send the selected LetterCode (value of option) to function countryChanged, because, i thought if i do so, then i will be able to easilly load the states into the additional dropdown and show it on site.

Simply use ng-options which will assign the selected model to the ng-model for the <select>. For example
<select ng-model="model.selectedCountry" ng-change="countryChanged()"
ng-options="country.CommonName for country in model.Countries track by country.ISO316613LetterCode">
</select>
Then, your countryChanged() function (and any other controller function) can use $scope.model.selectedCountry which will be a full country object.
Plunker demo ~ http://plnkr.co/edit/tFjvT92B1itmwkRjZIbJ?p=preview

Since you're using $scope for every variable you could use rootScope
https://docs.angularjs.org/api/ng/service/$rootScope
for passing the data.