我如何使用 AngularJs 显示枚举值答案

【问题标题】：How do i show enum value using AngularJs我如何使用 AngularJs 显示枚举值
【发布时间】：2017-08-31 22:21:45
【问题描述】：

我在我的模式下创建了一个枚举。

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

我在主类中使用了枚举。

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

然后我像这样播种数据

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),
}

因此，在数据库中，任何值 b/w 1,7 都会保存为颜色。 这很好。

现在我将这些数据从控制器返回到我的视图

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

问题： 它向我的视图返回一个颜色整数，因此数字显示在视图中。我想显示给定数字的颜色名称。

我正在使用 angularJs，这是我的代码。

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

【问题讨论】：

标签： angularjs asp.net-web-api enums

【解决方案1】：

JSON.NET（ASP.NET 的默认 json 序列化程序）有一个 [JsonConverter(typeof(StringEnumConverter))] 的属性

所以

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

将 Color 序列化为字符串值。

【讨论】：

【解决方案2】：

我通过在客户端上有一个类似的对象来表示服务器上的枚举来处理这个问题。

类似：

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

然后在我看来，我将呈现一个选择并将选择的 ng-model 绑定到来自服务器的值：

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

【讨论】：

这种方式我知道，但我认为这不是聪明的方式。所以在这个论坛上问这个以获得聪明的方法。
您会随时在客户端上创建这些对象吗？如果是这样，您将需要知道客户端上的枚举值。如果没有，您可以将枚举值（而不是数字）从服务器发送到客户端

【解决方案3】：

在模型属性上添加 [JsonConverter(typeof(StringEnumConverter))] 属性的替代方法是在 WebApiConfig 中添加格式化程序：

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

【讨论】：

【解决方案4】：

不确定这是否仍然令人感兴趣。我以不同的方式解决了这个问题：

1) 像以前一样加载 json 数据。将枚举序列化为整数，而不是字符串。

2) 从 ApiController 加载枚举列表作为 {Id, Name} 对。 Name 属性填充了特定于语言的字符串。

3) 通过对 AngularJS 控制器的简单 javascript 方法调用，查找列表中每个枚举 Id 的本地化名称。（或者，您可以在此处使用过滤器，但这取决于您）

4) 如果语言已更改，则连接 $rootScope.$On('translateChangeSuccess',...) 事件以重新加载本地化枚举。

如果这还不够清楚和/或您需要代码示例，请告诉我。

【讨论】：