AngularJS Select Binding with C# Enum

Problem

I have C# enum.

public enum ClueType
{
    Text,
    Image
}
    
public class Clue
{
    public ClueType ClueType { get; set; }
}

I have Web API that provides the enum as System.Web.Mvc.SelectListItem.

public class ClueTypesController: ApiController
{
    [System.Web.Http.HttpGet]
    public IEnumerable<SelectListItem> Get()
    {
        var list = EnumHelper.GetSelectList(typeof(ClueType));

        return list;
    }
}

And finally, I have AngularJS partial html that uses the enum. core.ClueTypes holds the result of the Web API.

<select ng-model="clue.ClueType"
    ng-options="c.Value as c.Text for c in core.ClueTypes">
</select>

When I run it, the dropdown shows item list well and it saves the selected value well. But when it loads, ng-model="clue.ClueType" doesn’t seem to work. It always selects blank item with ? value.

Angular-rendered HTML content:

<select ng-model="gate.Clue.ClueType" 
        ng-options="c.Value as c.Text for c in core.ClueTypes" 
        class="ng-pristine ng-valid">
    <option value="?" selected="selected"></option>
    <option value="0">Text</option>
    <option value="1">Image</option>
</select>

What went wrong?

Solution

Clue class’s ClueType is int value, and core.ClueTypes holds string type value for Value. Instead of raising any error, AngularJS silently ignores the int value.

You can solve it by making these two types match. Here I am giving int type Value to core.ClueTypes, making both core.ClueTypes.Value and clue.ClueType to be int.

new Web API to return int type Value:

public class ClueTypesController: ApiController
{
    [System.Web.Http.HttpGet]
    public IEnumerable<NumericValueSelectListItem> Get()
    {
        var list = EnumHelper.GetSelectList(typeof(ClueType))
            .Select(x => new NumericValueSelectListItem()
                {
                    Text = x.Text,
                    Value = int.Parse(x.Value)
                });

        return list;
    }
}

public class NumericValueSelectListItem
{
    public string Text { get; set; }
    public int Value { get; set; }
}

I ended up with my own EnumHelper since I needed spaces in the Text, which also made my Web API controller code briefer.

Written on May 1, 2014