如何使用AngularJs显示枚举值

时间:2015-10-31 07:40:17

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

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

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

我在我的主要班级使用了enum。

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>

4 个答案:

答案 0 :(得分:3)

JSON.NET(ASP.NET的默认json序列化程序)具有此 set mySSID to do shell script "/System/Library/PrivateFrameworks/Apple80211.framework/Resources/airport -I | awk '/ SSID: / {print $2}'" 的属性

所以

[JsonConverter(typeof(StringEnumConverter))]

将Color序列化为字符串值。

答案 1 :(得分:1)

我通过在客户端上使用代表服务器上的枚举的类似对象来处理此问题。

类似的东西:

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

然后在我的视图中,我将选择并将选择的ng模型与服务器中的值进行对比:

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

答案 2 :(得分:0)

在模型属性上添加[JsonConverter(typeof(StringEnumConverter))]属性的另一种方法是在WebApiConfig中添加格式化程序:

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

答案 3 :(得分:0)

不确定这是否仍有意义。我以不同的方式解决了这个问题:

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

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

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

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

请告诉我这是否不够清楚和/或您需要一个代码示例。