Why getting value like this [1] in AngularJS - angularjs

I need to get id from table but I am getting id like this [1]. I need to get 1 only.
Controller
public JsonResult GetLineManagerId(string LineManagerId)
{
var lineManagerId = db.Employees
.Where(x => x.FirstName == LineManagerId)
.Select(x =>x.Id);
return Json(lineManagerId);
}
Angular
$scope.GetLineManagerId = function (LineManagerId) {
$http.get('/Official/GetLineManagerId?LineManagerId=' + LineManagerId).then(function (data) {
console.log(data);
$scope.lineManagerId = data.data;
$scope.empModel.lineManagerId = $scope.lineManagerId[0].lineManagerId;
});
};
html
<select ng-model="empModel.name" id="" name="Name" class="form-control"
ng-change="GetLineManagerId(empModel.name)"
ng-click="GetLineManagerId(empModel.name)"
ng-options="d.name as d.name for d in name">
<option></option>
</select>
<select ng-model="empModel.id" id="" name="Id" class="form-control"
>
<option>{{lineManagerId}}</option>
</select>
when I click on 1st dropdown I get id like this [1].. I need to get number only like this 1
I need to get id number in dropdown, also if someone help me to get id in text input instead of using dropdown.

Try this, Please don't use ng-click here
<select ng-model="empModel.name" id="" name="Name" class="form-control"
ng-change="GetLineManagerId(empModel.name)"
ng-options="d.name as d.name for d in name">
<option></option>
Load linemanager using this
<select ng-model="empModel.id" id="" name="Id" class="form-control"
ng-options="d.lineManagerId as d.lineManagerId for d in lineManagerId"
>
<option></option>
</select>
your other portion will remain unchanged I think

You are returning an array/enumeration instead of a single value.
public JsonResult GetLineManagerId(string LineManagerId)
{
var lineManagerId = db.Employees
.Where(x => x.FirstName == LineManagerId)
.Select(x =>x.Id); // returns an IEnumerable<T> for whatever Id is
return Json(lineManagerId);
}
You have to select a single result like
var lineManagerId = db.Employees
.Where(x => x.FirstName == LineManagerId)
.Select(x =>x.Id)
// returns first value or default, i.e. 0 for int, null for string
.FirstOrDefault();

Related

Trying to display value in my select option

When I try to display my value the select box is always empty. The value is a integer 0 1 2 3 . In this case it should show 0, but the box is empty. What am I doing wrong?
vmDialog.dataModel.requestType value is equal to a 0 integer, but not displaying.
<select class="form-control " name="requestType" ng-model="vmDialog.dataModel.requestType">
<option value=0>0</option>
<option value="{{0}}">0</option>
<option value="0">0</option>
</select>
Firstly there is a simple HTML issue, you need to ensure that each option has a unique value, so far you have used the value 0 for all the options, so when the requestType has a value of 0, the UI cannot pick which of the items should be selected.
If the value supposed to be one of 0,1,2,3 then you need to make sure that there is an option with a corresponding value that can be selected.
What you probably want to do is bind the options to an array that is in the view model:
// on vmDialog
var requestTypeOptions = [
{ name = 'Zero', value = 0 },
{ name = 'One', value = 1 },
{ name = 'Two', value = 2 },
{ name = 'Three', value = 3 },
];
Then in the view: (using ng-options)
<select class="form-control"
name="requestType"
ng-model="vmDialog.dataModel.requestType"
ng-options="o.value as o.name for o in vmDialog.requestTypeOptions track by o.value | orderby: 'value'"
class="form-control input-sm">
</select>
A good write-up for ng-options here: https://stackoverflow.com/a/30507651/1690217
You could also use ng-repeat if you need to customise the template:
<select class="form-control " name="requestType" ng-model="vmDialog.dataModel.requestType">
<md-option ng-value="o.value" ng-repeat="oin vmDialog.requestTypeOptions | orderBy: 'value'">{{o.name}}</md-option>
</select>

binding two selects angular

I have two selects
The first one is for regions
and the second one for cities
The first one is filled with regions
Now i have a methode that brings cities by the id of the region .
I dont know how to get the idregion and put it into the params function
This is my first select
<div class="form-group">
<label for="">Region</label>
<select class="form-control"
[(ngModel)]="region" name="Region">
<option></option>
<option *ngFor="let region of
objectKeys(dropDownList2)|keys"
[value]="dropDownList2[region].idRegion">
{{dropDownList2[region].nomRegion}}
</option>
</select>
</div>
My services :
getville() {
return this.http.get(this.urltest + 'Villes');
}
getRegion() {
return this.http.get(this.urltest + 'Regions');
}
GetRegionVille(idRegion) {
return this.http.get(this.urltest + 'Villes/GetRegionVille/' + idRegion);
}
My component.ts :
getidregion() {
this.res.getRegion().subscribe(R => {
this.dropDownList2 = R as any;
});
}
getregionville() {
this.res.GetRegionVille(****i don t know how to get the idregion**** )
.subscribe(response => {
this.dropDownList = response as any;
});
}
this is my function
// GET: api/Villes
[HttpGet("GetRegionVille/{id}")]
public async Task<IActionResult> GetRegionVille([FromRoute] int id)
{
var req = from v in _context.Villes
join r in _context.Regions
on v.IdRegion equals r.IdRegion
where r.IdRegion == id
select new {v.NomVille };
return Ok(req);
}
My select of the cities :
<div class="form-group">
<label for="">Ville</label>
<select class="form-control" name="Ville"
[(ngModel)]="ville">
<option></option>
<option *ngFor="let ville of objectKeys(dropDownList) |
keys"
[value]="dropDownList[ville].idVille">
{{dropDownList[ville].nomVille}}
</option>
</select>
The selected value will be in region variable as you state [(ngModel)]="region" and you can use (ngModelChange)="onChange($event)" to get an event when value changes
I am not sure if using two way data binding with (ngModelChange) is efficient, so please see this answer How can I get new selection in "select" in Angular 2?

angularjs bootstrap typeahead return child

My input binds to object line.product however typeahead is returning the list of pairs of products and supplier. The current ps.product as ps.product.code for ps in getProductSupplierRefList($viewValue) does not return the expected product.
<input ng-model="line.product"
class=" form-control"
typeahead="ps.product as ps.product.code for ps in getProductSupplierRefList($viewValue)"
typeahead-loading="isLoading"
typeahead-on-select="productSupplierSelected($item, line)"
typeahead-template-url="productSupplierRefList.html"/>
getProductSupplierRefList calls webapi and return a list of ProductSupplierRefModel:
public class ProductSupplierRefModel
{
public ProductRefModel Product { get; set; }
public SupplierRefModel Supplier { get; set; }
}
The product code is expected in text control:
Any suggestion pls?
use typeahead-input-formatter to show the code. looks like ps.product as ps.product.code is not working???
<input ng-model="line.product"
type="text"
class=" form-control"
ng-keyup="getProductSupplierRefList($event)"
typeahead="ps.product as ps.product.code for ps in filterProductSuppliers"
typeahead-loading="isLoading"
typeahead-input-formatter="formatProduct($model)"
typeahead-wait-ms=500
typeahead-on-select="productSupplierSelected($item, line)"
typeahead-template-url="productSupplierRefList.html" />
where the formatter is:
$scope.formatProduct=function(model) {
return model ? model.code : '';
}
the product code now appears as expected:
Don't use function in typehead. Also be careful about the model properties camel case.
<input ng-model="line.product"
class=" form-control"
ng-keyup="getProductSupplierRefList($event)"
typeahead="ps.Product as ps.Product.Code for ps in productOptions"
typeahead-loading="isLoading"
typeahead-on-select="productSupplierSelected($item, line)"
typeahead-template-url="productSupplierRefList.html"/>
$scope.productOptions = [];
$scope.getProductSupplierRefList = function(evt){
var value = angular.element(evt.target).val();
$http.get('url/' + value).then(funtion(response){
$scope.productOptions = response.data;
})
}
//test ps.Product.Code with _tojson(ps.Product.Code)
$scope._tojson= function(obj){
return angular.toJson(obj);
}

How to get datalist selected options id's value with ng-repeat and fillter?

I used datalist to search the value which I entered in input field and filtered. I need to send selected options id to the controller function.
<input list="browsers" type="text" id="searchtextbox" class="form-control" placeholder="Search" ng-model="searchText">
<datalist id="browsers">
<option ng-repeat="data in enroldata | filter: searchText" id="{{data.USERID}}" id="{{data.USERID}}" value="{{data.FIRSTNAME}} {{data.LASTNAME}}">{{data.FIRSTNAME}} {{data.LASTNAME}}</option>
</datalist>
<input type="button" class="btn btn-primary btn-flat" ng-click="enrol({{data.USERID}})" value="Send" />
In controller
$scope.enrol = function (USERID) {
debugger;
var value = $scope.USERID;
var val = $('#searchtextbox').val();
var states = $('#browsers');
var endVal = $(states).find('option[value="' + val + '"]');
//depending on your logic, if endVal is empty it means the value wasn't found in the datalist, you can take some action here
return endVal.text();
var USERID1 = $scope.searchText;
//var value = $('#searchText').val();
//alert($('#browsers [value="' + value + '"]').data('value'));
//var x = $('#searchtextbox').val();
//var z = $('#browsers');
//var val = $(z).find('option[value="' + x + '"]');
//var endval = val.attr('id');
//alert(endval);
debugger;
var dat = {
"courseid": localStorage.getItem("courseid")
, "USERID": USERID
}
}
I need search by username and pass the USERID by fucntion or with id binding....
I tried to call it by id and passed with function its return undefined.
ng-repeat="data in enroldata | filter: searchText"
data is only accessible from the inside of ng-repeat
I think You can simply call enrol() on click (ng-click="enrol()") and get data inside the controller from the $scope.enrolData

Drop down list filters aren't working

I'm trying to filter one drop down list (DDL) based on a selection made in another. I was referencing this question for how to do it: Angularjs Filter data with dropdown
My DDLs look like this:
<select class="form-control input-sm"
ng-change="echo(selectedDepartment);"
ng-model="selectedDepartment"
ng-options="d as d.DepartmentName for d in departmentList track by d.DepartmentId"></select>
<select class="form-control input-sm"
ng-change="echo(selectedTeam);"
ng-model="selectedTeam"
ng-options="t as t.TeamName for t in (teamList | filter: filterTeams) track by t.TeamId"></select>
<select class="form-control input-sm"
ng-change="echo(selectedRep);"
ng-model="selectedRep"
ng-options="r as (r.FirstName + ' ' + r.LastName) for r in (repList | filter: filterReps) track by r.UserId"></select>
The echo function in ng-change is just using console.log so I can verify that the model is being updated when a selection is made and it is.
Here are my filter functions:
$scope.filterTeams = function (team) {
console.log("Team's DeptId: " + team.Department.DepartmentId + " Selected Dept Id: " + $scope.selectedDepartment.DepartmentId);
return (team.Department.DepartmentId === $scope.selectedDepartment.DepartmentId);
};
$scope.filterReps = function(rep) {
return (rep.TeamId === $scope.selectedTeam.TeamId);
};
What's strange is that when I reference $scope.selectedDepartment in my filter function it's always an empty object even after the echo function running in ng-change shows it's been updated.
The filter functions are part of the same controller that the DDLs are referencing and have the same $scope object.
When I select a department my team DDL goes blank since it's comparing team.Department.DepartmentId to undefined.
How can $scope.selectedDepartment be an empty object and be populated at the same time?
For inexplicable reasons you can't use $scope in a filter function. So to make this work you have to create a local variable in your controller and copy the value from your $scope variable to the local one for the filter function to use. Then everything works.
Here's the updated view:
<select class="form-control input-sm"
ng-change="updateSelectedDepartment(selectedDepartment);"
ng-model="selectedDepartment"
ng-options="d as d.DepartmentName for d in departmentList track by d.DepartmentId"></select>
<select class="form-control input-sm"
ng-change="updateSelectedTeam(selectedTeam);"
ng-model="selectedTeam"
ng-options="t as t.TeamName for t in (teamList | filter: filterTeams) track by t.TeamId"></select>
<select class="form-control input-sm"
ng-model="selectedRep"
ng-options="r as (r.FirstName + ' ' + r.LastName) for r in (repList | filter: filterReps) track by r.UserId"></select>
And here's the relevant sections from the controller:
var selectedDepartment = {};
var selectedTeam = {};
$scope.updateSelectedDepartment = function(dept) {
selectedDepartment = dept;
};
$scope.updateSelectedTeam = function (team) {
selectedTeam = team;
};
$scope.filterTeams = function (team) {
return (team.Department.DepartmentId === selectedDepartment.DepartmentId);
};
$scope.filterReps = function (rep) {
return (rep.Team.TeamId === selectedTeam.TeamId);
};
Here's another option...instead of making the filter a function on your controller, make it an actual filter (the added benefit there is you can reuse the filter in other areas). So do this:
.filter('teamsFilter', function() {
return function(teamsList, selectedDepartment) {
var out = [];
angular.forEach(teamsList, function(team) {
if (team.Department.DepartmentId === selectedDepartment.DepartmentId) {
out.push(team);
}
});
return out;
}
})
And then use it like this:
<select ng-model="selectedTeam"
ng-options="t as t.TeamName for t in (teamList | teamsFilter: selectedDepartment)"></select>

Resources