How do i show enum value using AngularJs

Question

I have created an enum in my mode.

public enum Color
{
    Green,
    Black,
    Red,
    Silver,
    Yellow,
    White,
    Grey,
}

I used thus enum in my main class.

public class MotorDetails
{
    public int Id { get; set; }
    public string Name { get; set; }

    public string Make { get; set; }
    public string Model { get; set; }
    public string Year { get; set; }
    public string Kilometers { get; set; }
    public Color Color { get; set; }
 }

I then seed data like

context.MotorDetails.AddOrUpdate(x => x.Id, new MotorDetails()
{
   Name = "Accord",
   Make = "Honda",
   Model = "Accord",
   Year = r.Next(1980,2016).ToString(),
   Kilometers = r.Next(50000, 200000).ToString(),
   Color = (Color)r.Next(1,7),
}

So,in database any value b/w 1,7 is saved for color. Which is fine.

Now i am return this data to my view from controller

public List<MotorDetails> getByMake(string make, int minPrice, int maxPrice)
{
    List<MotorDetails> motor = db.MotorDetails.Where(x => x.Make == make && x.Price >= minPrice && x.Price <= maxPrice).ToList();
    return motor;
}

Problem: It returns an integer for color to my view and hence number is showing on view. I want to show color name for given number.

I am using angularJs and here is my code.

<div>
<table class="table">
    <tr>
        <th>Name</th>
        <th>Make</th>
        <th>Model</th>
        <th>Year</th>
        <th>Kilometers</th> 
        <th>Price</th>   
        <th>Color</th>           
    </tr>
    <tr ng-repeat="m in motors">
        <td>{{m.Name}}</td>
        <td>{{m.Make}}</td>
        <td>{{m.Model}}</td>
        <td>{{m.Year}}</td>
        <td>{{m.Kilometers}}</td>
        <td>{{m.Price}}</td>
        <td>{{m.Color}}</td>
    </tr>
</table>
</div>

Answer 1

JSON.NET (the default json serializer for ASP.NET) has an attribute for this [JsonConverter(typeof(StringEnumConverter))]

So

public class MotorDetails
{
    public int Id { get; set; }
    public string Name { get; set; }

    public string Make { get; set; }
    public string Model { get; set; }
    public string Year { get; set; }
    public string Kilometers { get; set; }

    [JsonConverter(typeof(StringEnumConverter))]
    public Color Color { get; set; }
} 

Will serialize the Color as the string value.

Answer 2

I handle this by having a similar object on the client that represents the enum on the server.

Something like:

vm.lookups.colors = [];
vm.lookups.colors.push({ id: 1, value: 'Green' });
vm.lookups.colors.push({ id: 2, value: 'Black' });
// etc.

Then in my view I will render a select and bing the ng-model of the select to the value from the server:

<select ng-options="color.id as color.value for color in vm.lookups.colors" 
        ng-model="m.Color" disabled>
</select>