如何使用AngularJs显示枚举值

我在我的模式下创建了一个枚举。如何使用AngularJs显示枚举值

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>

来源

2015-10-31 simbada

JSON.NET（ ASP.NET的默认JSON序列化）对该[JsonConverter(typeof(StringEnumConverter))]

所以

属性10

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作为字符串值。

来源

2015-10-31 08:07:54 Umair

谢谢，它的好方法，并解决了我的问题。 – simbada

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

喜欢的东西：

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

然后在我看来，我将作出选择和Bing选择的NG-模型从服务器值：

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

来源

2015-10-31 07:56:26 keithm

这样我知道，但我认为这不是聪明的方式。所以在这个论坛上提出这个问题以获得智能方法。 – simbada

你会在任何时候在客户端上创建这些对象吗？如果是这样，您将需要知道客户端上的枚举值。如果没有，你可以发送枚举值（不是数字）从服务器到客户端 – keithm

在您的模型属性添加[JsonConverter(typeof(StringEnumConverter))]属性另一种方法是在你的WebApiConfig添加格式化：如果

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

来源

2017-08-29 17:16:37 Eric

不知道这是利益还是。我以不同的方式解决了这个问题：

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

2）从ApiController加载作为{Id，Name}对的枚举列表。名称属性由语言特定的字符串填充。

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

4）连接$ rootScope。$ On（'translateChangeSuccess'，...）事件来重新加载本地化的枚举，如果语言已经改变。

让我知道如果这不够清楚和/或你需要一个代码示例。

来源

2017-08-31 14:21:45 thomasgalliker

如何使用AngularJs显示枚举值

回答

相关问题