Question

我正在努力列出数据库中的一组数据，并在下拉列表中获取/显示。使用Angular JS。

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

为什么它没有从数据库中获取信息似乎缺失或做错了？

Answer 1

这就是我用我的例子创建一个select标签的方法： -

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

您可以对您的示例使用相同的方式

下拉列表没有填充 - Angular JS

1 个答案: