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>

Umair · Accepted Answer · 2015-10-31 08:07:54Z

3

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.

answered Oct 31, 2015 at 8:07

Umair

3,2931 gold badge34 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ΩmegaMan · Accepted Answer · 2017-06-21 00:05:03Z

1

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>

edited Jun 21, 2017 at 0:05

ΩmegaMan

32.2k13 gold badges110 silver badges138 bronze badges

answered Oct 31, 2015 at 7:56

keithm

9586 silver badges10 bronze badges

2 Comments

simbada Over a year ago

That way i know but i think that is not smart way. So asked this on this forum to get smart approach.

keithm Over a year ago

Will you be creating these objects on the client at any point ? If so, you will need to know the enum values on the client. If not, you could just send the enum value ( not the number ) from the server to the client

Eric · Accepted Answer · 2017-08-29 17:16:37Z

0

An alternative to adding the [JsonConverter(typeof(StringEnumConverter))] attribute on your model property is to add a formatter in your WebApiConfig:

config.Formatters.JsonFormatter.SerializerSettings.Converters.Add(new StringEnumConverter());

answered Aug 29, 2017 at 17:16

Eric

1852 silver badges7 bronze badges

Comments

thomasgalliker · Accepted Answer · 2017-08-31 14:21:45Z

0

Not sure if this is still of interest. I solved this problem differently:

1) Load json data just as before. Serialize enums as Integers, not as strings.

2) Load list of enums as pairs of {Id, Name} from an ApiController. The Name properties are filled with language-specific strings.

3) Lookup the localized Name for each enum Id in the list by a simple javascript method call to your AngularJS controller. (Alternatively you could use a filter here, but thats up to you)

4) Hookup the $rootScope.$On('translateChangeSuccess',...) event to reload the localized enums if the language has been changed.

Let me know if this was not clear enough and/or you need a code example.

answered Aug 31, 2017 at 14:21

thomasgalliker

1,94421 silver badges23 bronze badges

Collectives™ on Stack Overflow

How do i show enum value using AngularJs

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related