Question

我使用一个非常简单的Angular指令来整合选择：

https://github.com/paolodm/angular-selectize/blob/master/angular-selectize.js

app.directive('selectize', function( $timeout ) {
    return {
        link: function( $scope, element, attrs ) {
            $timeout(function() {
                $(element).selectize($scope.$eval(attrs.selectize))
            })
        }
    };
});

我的整个表格如下：

<form>
    <input id="title" type="text" ng-model="post.title" />

    <select placeholder="Tags"
        ng-options='tag.name for tag in tags'
        ng-model='post.tags'
        selectize="{ maxItems: 3 }"
        multiple></select>

    <button ng-click="create( post )">create</button>
</form>

Selectize已正确连接。

但是，在我的创建功能中，我得到了post.title，但那就是它。

$scope.tags = [{
    id: 1,
    name: 'Tag1'
}, {
    id: 2,
    name: 'Tag2'
}];

$scope.create = function( post ) {

    console.log( 'post: ', post );

};

// logs {title: 'input value'}

如果我删除了selectize()来电，那么它就是一个简单的html元素，并保留ng-model="post.tags"它可以正常工作，我会得到标签的预期值。

如果没有selectize指令，我可以在控制台中运行$('select').val()并正确返回[ "1", "2" ]，例如，这是标签的ID，这就是我想要的。他们只是没有通过选择性发送给create。

什么了？

Answer 1

我是Angular的新手/选择自己，但我认为只有你的选项是硬编码的，你的指令才有效，例如：

<select ...>
    <option value="1">Option1</option>
    ...
    <option value="n">OptionN</option>
</select>

否则，Selectize可能在ng-options创建它们之前被实例化。因此，here is the directive我使用。

Angular + Selectize在表单创建中获得价值

1 个答案: