how to create syncfusion dropdownlist in angularjs - angularjs

Question

I am using syncfusion dropdownlist. I want to create a dropdownlist for blood group in my form. How can I do that in angularjs?
<input type="text" ej-dropdownlist e-datasource="BloodGroup_List" e-value="Name" ng-model="employee.bloodgroup">
In my controller I have written,
$scope.bloodgroup = [{ "Id": "1", "Name": "O+" },
{ "Id": "2", "Name": "O-" },
{ "Id": "3", "Name": "A+" },
{ "Id": "4", "Name": "A-" },
{ "Id": "5", "Name": "B+" },
{ "Id": "6", "Name": "B-" },
{ "Id": "7", "Name": "AB+" },
{ "Id": "8", "Name": "AB-" }];
$scope.BloodGroup_List = $scope.bloodgroup;
The above code is not working, where am I wrong?

Answer 1

You need to map the data source to the corresponding attributes in "fields" property.
<input type="text" id="bloodgroup" ej-dropdownlist e-datasource="BloodGroup_List" e-fields-text="Name" e-fields-value="Name" e-fields-id="Id" e-value="value">
In the script, inject 'ejAngular' and specify your values as shown below
angular.module('DropCtrl', ['ejangular'])
.controller('DropDownCtrl', function ($scope) {
$scope.bloodgroup = [{ "Id": "1", "Name": "O+" },
{ "Id": "2", "Name": "O-" },
{ "Id": "3", "Name": "A+" },
{ "Id": "4", "Name": "A-" },
{ "Id": "5", "Name": "B+" },
{ "Id": "6", "Name": "B-" },
{ "Id": "7", "Name": "AB+" },
{ "Id": "8", "Name": "AB-" }];
$scope.BloodGroup_List = $scope.bloodgroup;
$scope.value = "AB-";
});
This will work for you.

Answer 2

Try this..
<select ng-model="selectedItem">
<option ng-repeat="bloodgroupvalue in bloodgroup" value="{{bloodgroupvalue.Id}}">{{bloodgroupvalue.Name}}</option>
</select>
or
<select ng-model="selectedItem" ng-options="bloodgroupvalue.Name for bloodgroupvalue in bloodgroup">
</select>

Answer 3

You need to use e-fields-text="Name" to show text on in the dropdown then it will bind the value to that ng-model
HTML
<input id="test" type="text" ej-dropdownlist e-datasource="BloodGroup_List" e-fields-text="Name"
e-fields-value="Name" ng-model="employee.bloodgroup" e-change="selectedBloodGroup"/>
CODE
$scope.selectedBloodGroup = function(args) {
$scope.employee.bloodgroup = args.value;
$scope.$apply();
};
Working Plunkr