Breeze / Angular:如何在html中选择枚举类型?

时间:2013-11-09 16:29:11

标签: angularjs enums breeze

我知道Breeze现在支持枚举类型,我可以在html中获得枚举类型显示而没有问题。但是,我无法弄清楚如何在客户端中编辑此字段。

例如:

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
    public SexTypes SexType { get; set; }
}

public enum SexTypes
{
    Male, Female
}

我想使用select标签来选择性别类型,如

<select ng-model="student.sexType" ng-options="g for g in sexTypes"></select>

当我查看元数据(通过api / breeze / metadata)时,我确实看到我的枚举类型为

enumType: {
    name: "SexTypes",
    isFlags: "false",
    underlyingType: "Int32",
    member: [
        {
            name: "Male",
            value: "0"
        },
        {
            name: "Female",
            value: "1"
        }
    ]
},

现在,问题是如何在我的控制器中填充$scope.sexTypes

4 个答案:

答案 0 :(得分:0)

如果按照说明返回了元数据,那么select的绑定将是

<select ng-model="student.sexType" ng-options="g.name for g.value in enumType.member"></select>

答案 1 :(得分:0)

我不相信Breeze会以您期望的方式支持Enum类型。

当Breeze读取元数据时,它会看到Student.sexType是枚举属性,枚举名称是SexType。它在数据属性元数据中记录两个事实。

var property = manager.metdataStore.getEntityType('Student').getDataProperty('sexType');
console.log(property.enumType); // "Edm.Self.Color"
console.log(property.dataType.name): // "String"

但这就是它所知道的一切。 Breeze客户端MetadataStore忽略来自服务器的元数据中的SexType定义。它将DataType属性的Student.sexType设置为“String”,因为它希望客户端使用枚举的字符串名称来获取和设置属性。这就是它所做的一切

如果要使用枚举值填充下拉列表,则必须自己创建列表,并通过父ViewModel(在ng-speak中称为“控制器”)公开该列表。您可以对它们进行硬编码,也可以将它们从服务器到达的元数据流中删除。

Breeze可能......也许应该......在MetadataStore中捕获枚举类型及其值。我可以提供一个枚举验证器来检测何时将属性设置为除枚举选项之外的其他属性。

不幸的是,据我所知,目前这两件事都没有(第1.4.5节)。

我认为你有一个值得的事业。我鼓励您在Breeze User Voice上表达您对此主题的兴趣。

答案 2 :(得分:0)

在此期间,您可以创建全球&#34; enums&#34;来自您的元数据:

manager.fetchMetadata()
    .then(function (data) {

        // extract all enums als global objects
        ko.utils.arrayForEach(data.schema.enumType, function (c) {
            window[c.name] = {};
            ko.utils.arrayForEach(c.member, function (m) {
                window[c.name][m.name] = m.value;
            });
        });

});

因此,如果您有一个名为&#34; SexType&#34;的枚举,您现在可以调用一个全局对象:

var gender = SexType.Female; //returns the value as defined in the server side enum

答案 3 :(得分:0)

我就是这样做的。

第1步

配置我的服务器控制器以从网址返回枚举,例如〜/ api / breeze / enums?type = {0}

第2步

创建dataContext提供程序。

.provider("dataContext", [function () {
    var url = "/api/breeze";

    function context() {
        this.manager = new window.breeze.EntityManager(url);
    }

    context.prototype.query = function (entitySet) {
        return new window.breeze.EntityQuery(entitySet).using(this.manager);
    };

    context.prototype.saveChanges = function () {
        return this.manager.saveChanges();
    };

    this.$get = function () {
        return new context();
    };
}])

第3步

创建myEntitySet指令。

.directive("myEntitySet", ["dataContext", function (dataContext) {
    return {
        scope: true,
        restrict: "A",
        controller: ["$scope", function ($scope) {
            $scope.items = [];
        }],
        link: function ($scope, $element, $attrs) {
            dataContext.query($attrs.myEntitySet)
                .execute()
                .then(function (data) {
                    $scope.items = data.results;
                    $scope.$apply();
                });
        }
    };
}])

第4步

使用myEntitySet指令:

<select my-entity-set="Enums?type=ProductType"
    ng-model="item.Type"
    ng-options="c.Name as c.Name for c in items | orderBy:'Name':true">
</select>