从JavaScript的控制器中将数据列表获取到HTML select中

Question

I'm trying to get data into HTML select with this code:

HTML:

<div ng-controller="Manufacturer">
    <select ng-model="myManufacturer" ng-options="Manufacturer.name for Manufacturer in Manufacturers" class="form-control"></select>
</div>

JS:

angular.module('MyApp')

    .controller('Manufacturer', ['$scope', function ($scope) {
        $scope.CarManufacturer = null;
        $.post("/Data/GetAllManufacturers");
        $scope.Manufacturers = $.post.Data;
        alert($scope.CarManufacturer);
      //  $scope.Manufacturers = [
      //  { name: 'Audi' , id: 1 },
      //  { name: 'Volvo', id: 2 },
      //  { name: 'BMW', id: 3 },
      //  { name: 'Skoda', id: 4 },
      //  { name: 'Siat', id: 5 }
      //];
        $scope.myManufacturer = $scope.Manufacturers[1]; // red
    }]);

CONTROLLER:

public List<string> GetAllManufacturers()
{
    dbCarEntities us = new dbCarEntities();
    List<string> asd = us.CarManufacturers.Select(x => x.Name).ToList();
    return asd;
}

Explanation:

I have an HTML select. I want to fill it with a list from my SQL table with Model Entity framework. So I need to go to a function and get back the list. I tried also with JSON. It doesn't work either.

Answer 1

got it!!

angular.module('MyApp') // extending from previously created angularJS  module in the First part
.controller('Part5Controller', function ($scope, LocationService) {
    // expained about controller in Part2 // Here LocationService (Service) Injected

    $scope.CountryID = null;
    $scope.StateID = null;
    $scope.CountryList = null;
    $scope.StateList = null;

    $scope.StateTextToShow = "Select State";
    $scope.Result = "";

    // Populate Country
    LocationService.GetCountry().then(function (d) {
        $scope.CountryList = d.data;
    }, function (error) {
        alert('Error!');
    });
    // Function For Populate State  // This function we will call after select change country
    $scope.GetState = function () {
        $scope.StateID = null; // Clear Selected State if any
        $scope.StateList = null; // Clear previously loaded state list
        $scope.StateTextToShow = "Please Wait..."; // this will show until load states from database

        //Load State 
        LocationService.GetState($scope.CountryID).then(function (d) {
            $scope.StateList = d.data;
            $scope.StateTextToShow = "Select State";
        }, function (error) {
            alert('Error!');
        });

    }
    // Function for show result
    $scope.ShowResult = function () {
        $scope.Result = "Selected Country ID : " + $scope.CountryID + " State ID : " + $scope.StateID;
    }

})
.factory('LocationService', function ($http) { // explained about factory in Part2
    var fac = {};
    fac.GetCountry = function () {
        return $http.get('/Data/GetCountries')
    }
    fac.GetState = function (countryID) {
        return $http.get('/Data/GetStates?countryID='+countryID)
    }

    return fac;
});

in $http.get we can put how many arguments we want.

in the controller :

public JsonResult GetCountries()
{
    List<Country> allCountry = new List<Country>();
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        allCountry = dc.Countries.OrderBy(a => a.CountryName).ToList();
    }
    return new JsonResult { Data = allCountry, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
// Fetch State by Country ID

public JsonResult GetStates(int countryID)
{
    List<State> allState = new List<State>();
    using (MyDatabaseEntities dc  = new MyDatabaseEntities())
    {
        allState = dc.States.Where(a => a.CountryID.Equals(countryID)).OrderBy(a => a.StateName).ToList();
    }
    return new JsonResult { Data = allState, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

and finally HTML view:

<div ng-controller="Part5Controller">
    Country : <select ng-model="CountryID" ng-options="I.CountryID as I.CountryName for I in CountryList" ng-change="GetState()">
                <option value="">Select Country</option>
              </select>
    State : <select ng-model="StateID" ng-options="I.StateID as I.StateName for I in StateList">
                <option value="">{{StateTextToShow}}</option>
            </select>
    <input type="button" value="Get Selected Values" ng-click="ShowResult()"/>
    <div style="padding:10px; font-weight:bold; border:1px solid #f3f3f3">
        {{Result}}
    </div>
</div>

@section scripts{
    <script src="~/Scripts/AngularController/Part5Controller.js"></script>
}