Dropdown-Liste nicht auffüllen - Angular JS

Question

Ich arbeite an der Auflistung einer Reihe von Daten aus der Datenbank und fetch/show in einer Dropdown-Liste. Verwenden von Angular JS.

The Database columns

HomeController.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace MCVMultiSelect.Controllers 
{ 
    public class HomeController : Controller 
    { 
     //Get view to show data in multiselect dropdown 
     public ActionResult Index() 
     { 
      return View(); 
     } 
     //Action for fetch data from database for show in multiselect dropdown 
     public JsonResult getcategories() 
     { 
      using (LocalTestDBEntities dc = new LocalTestDBEntities()) 
      { 
       return new JsonResult { Data = dc.Categories.ToList(), JsonRequestBehavior = JsonRequestBehavior.AllowGet }; 
      } 
     } 
     //Action for post selected data 
     [HttpPost] 
     public JsonResult savedata(int[] categoryIds) 
     { 
      //To make the application simple I'm just sending back the selected categories from here 
      List<Category> list = new List<Category>(); 
      if(categoryIds != null) 
      { 
       using(LocalTestDBEntities dc = new LocalTestDBEntities()) 
       { 
        list = dc.Categories.Where(a => categoryIds.Contains(a.CategoryID)).ToList(); 
       } 
       //do your additional work here 

      } 
      return new JsonResult { Data = list }; 
     } 
    } 
} 

application.js (Javascript)

var app = angular.module('Application', ['angularjs-dropdown-multiselect']); 
app.controller('multiselectdropdown', ['$scope', '$http', function ($scope, $http) { 
    //define object 
    $scope.CategoriesSelected = []; 
    $scope.Categories = []; 
    $scope.dropdownSettings = { 
     scrollable: true, 
     scrollableHeight: '200px' 
    } 

    //fetch data from database show in multiselect dropdown 
    $http.get('/home/getcategories').then(function (data) { 
     angular.forEach(data.data, function (value, index) { 
      $scope.Categories.Push({ id: value.CategoryID, label: value.CategoryName }); 
     }); 
    }) 
    //post or submit selected items from multiselect dropdown to server 
    $scope.SubmittedCategories = []; 
    $scope.SubmitData = Function() 
    { 
     var categorIDs = [];  
     angular.forEach($scope.CategoriesSelected, function (value, index) { 
      categoryIds.push(value.id); 
     }); 

     var data = { 
      categoryIds : categoryIds 
     }; 
     $http({ 
      method: "POST", 
      url: "/home/savedata", 
      data:JSON.stringify(data) 
     }).then(function(data) { 
      $scope.SubmittedCategories = data.data; 
     }, function(error){ 
      alert('Error'); 
     }) 

    } 

}]) 

Index.cshtml (HTML)

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Role Manager</h2> 

    @* Load bootstrap css *@ 
<link rel="sylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" /> 
    @* Load angularJS Library & lodash js *@ 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> 
    @* Load our js ("Application" here) file and angularjs-dropdown-multiselect directive *@ 
<script src="~/Script/angularjs-dropdown-multiselect.js"></script> 
<script src="~/Script/Application.js"></script> 

    @* CSS *@ 
<style> 
    .body-content{padding-top: 50px;} 
    .checkbox{padding: 0; margin: 0;} 
    .dropdown-menu{overflow:auto !important;} 
    .fore-group{display:inline-block; margin-right:10px} 
</style> 
    @* HTML Code *@ 
<div ng-app="Application" ng-controller="multiselectdropdown"> 
    <div class="container" style="margin:50px"> 
     <form class="form-inline" name="AppForm" role="form" ng-submit="SubmitData()"> 
      <div class="form-group"> 
       <label>Roles : </label> 
       @* Directive *@ 
       <div ng-dropdown-multiselect="" extra-settings="dropdownSettings" 
        option="Categories" selected-model="CategoriesSelected" checkboxes="true"></div> 
      </div> 
      <button type="submit" class="btn btn-primary">Save</button> 
     </form> 

     @* Show Selected Roles*@ 

     <div style="margin-top:40px" ng-if="SubmittedCategories.length > 0"></div> 

     <h2>Selected Roles</h2> 
     <table class="table table-responsive table-bordered"> 
      <thead> 
       <tr> 
        <th>ID</th> 
        <th>Role</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="cat in SubmittedCategories"> 
        <td>{{cat.CategoryID}}</td> 
        <td>{{cat.CategoryName}}</td> 


       </tr> 
      </tbody> 
     </table> 
    </div> 

</div> 

Screenshot of the Issue on Dropdown List

Was falsch fehlt oder zu tun zu sein scheint, warum es nicht die die Informationen bilden die DB holen?

Answer 1

Dies ist, wie ich einen select-Tag mit meinem Beispiel erstellt: -: `Daten: JSON.stringify (Daten)`

<select name="category" class="form-control" id="category2" ng-options="category as category.CategoryName for category in categories" ng-model="selectedItem3" ng-change="update()" required> 
      <option value="">Select Category</option> 
     </select> 

Sie die gleiche Art und Weise für Ihr Beispiel