如何使用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顯示枚舉值

回答

相關問題