如何在angularjs中创建syncfusion下拉列表

Question

我正在使用syncfusion下拉列表。我想在我的表单中为血型创建一个下拉列表。我怎么能在angularjs中做到这一点？

<input type="text" ej-dropdownlist e-datasource="BloodGroup_List" e-value="Name" ng-model="employee.bloodgroup"> 

在我的控制器中我已经写了，

$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; 

上面的代码不工作，我在哪里错了？

Answer 1

试试这个..

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

或

<select ng-model="selectedItem" ng-options="bloodgroupvalue.Name for bloodgroupvalue in bloodgroup"> 
     </select> 

Answer 2

您需要使用e-fields-text="Name"显示在下拉文本，然后它将绑定值到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

Answer 3

您需要将数据源中的相应属性映射 “域” 属性。

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

在脚本，注入 'ejAngular'，并指定你的价值观如下图所示

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

这会为你工作。