使用 Angular JS 在下拉列表中绑定 MVC 枚举列表

Posted 2023-02-22

【中文标题】使用 Angular JS 在下拉列表中绑定 MVC 枚举列表

【英文标题】：MVC Enum list bind in dropdown using angular JS

【发布时间】：2017-12-04 08:52:50

【问题描述】：

我有一个 MVC 枚举列表，我想使用 angular 方法将其绑定到下拉列表中。 怎么可能？

public enum DefultBookType : byte

  Not Direct= 0,
  Individual = 1


public ActionResult Application()
  ViewBag.BT = Enum.GetNames(typeof(DefultBookType)).ToList();
  return View();


@
 var lstBT=  @ViewBag.BT

<select ng-model="Btype" ng-options="ctr as ctr.Name for ctr in lstBT track by ctr.Id">
   <option value="">select</option>
</select>

【参考方案1】：

您可以使用Json.NET将对象集合转换为对象数组，然后需要在m中赋值

@
 var lstBT = JsonConvert.SerializeObject(ViewBag.BT);

然后您必须将 lstBT 分配到控制器的模型中才能使用；您不能直接引用 lstBT，因为 lstBT 是一个服务器端字符串，将作为 JSON 对象的客户端 javascript 数组呈现给客户端。

我不确定动态对象在序列化中是如何工作的；如果有问题，可以将 ViewBag 切换到 ViewData。

【参考方案2】：

如下代码sn-p所示即可。

替换controller.cs文件中的enum和action：

public enum DefultBookType : byte

    NotDirect = 0,
    Individual = 1


public ActionResult Application()

    ViewData["BT"] = JsonConvert.SerializeObject(Enum.GetValues(typeof(DefultBookType)), Formatting.Indented, new StringEnumConverter());
    return View();

您的.cshtml 将是

<select ng-model="selected" ng-options="key as val for (key, val) in @ViewData["BT"]">
   <option value="">select</option>
</select>

下拉菜单如截图所示：