Question

我一直在尝试使用ngTagsInput及其自动填充功能（mbenford.github.io/ngTagsInput/demos）以html格式在Mongodb中提交食谱。

基本上，我使用带有自动完成功能的ngTagsInput来查询我的成分数据库并在食谱中的成分中显示成分标签＆＃39;。

它工作正常，直到我保存食谱，并且没有保存成分。

我知道问题出在哪里，但我还没有找到解决方案。这是＆＃39;成分＆＃39;我的添加配方页面的字段没有ngTagsInput，只是一个普通的文本字段：

<div class="form-group">
            <label for="ingredients">List of ingredients</label>
            <input type="text" class="form-control" id="ingredients" ng-model="form.ingredients">
        </div>

以下是＆＃39;成分＆＃39;使用ngTagsInput的字段（工作正常，但不保存）：

<div class="form-group" ng-controller="recipeApiController">    
        <tags-input for="Ingredients" id="Ingredients" ng-model="tags" display-property="ingredientID" placeholder="Commence à taper le nom d'un ingrédient..." add-from-autocomplete-only="true">
        <auto-complete source="loadTags($query)"></auto-complete>
        </tags-input>
        </div>

因为我正在取代ng-model =＆＃34; form.ingredients＆＃34;使用ng-model =＆＃34;标签＆＃34;要求使用ngTagsInput，点击我的＆＃34;添加食谱＆＃34;按钮。

这是＆＃34;保存到db＆＃34;我的recipeApiController的一部分，用于＆＃34;添加配方＆＃34;表单页面：

$scope.addToDatabase = function(){
    RecipeApi.Recipe.save({}, $scope.form, 
    function(data){
        $scope.recipe.push(data);
    },
    function(err){
        bootbox.alert('Error: ' + err);
    });
}

你知道如何解决这个问题，并保存这些标签吗？

先谢谢你们。我不希望这篇文章太长，但如果你需要更多的信息，代码，我会提供它的超级反应。这对我有很大帮助。

Answer 1

我在另一篇文章中找到了解决方案： https://stackoverflow.com/a/38383917/6858949

基本上，我无法保存这些标签，因为ng-model在<tags-input>标签内不起作用。因此，我使用这个人的指令将<tags-input>更改为属性：

<div elem-as-attr="tags-input"></div>

这是指令代码：

app.directive('elemAsAttr', function($compile) { return { restrict: 'A', require: '?ngModel', replace: true, scope: true, compile: function(tElement, tAttrs) { return function($scope) { var attrs = tElement[0].attributes; var attrsText = ''; for (var i=0; i < attrs.length; i++) { var attr = attrs.item(i); if (attr.nodeName === "elem-as-attr") { continue; } attrsText += " " + attr.nodeName + "='" + attr.nodeValue + "'"; } var hasModel = $(tElement)[0].hasAttribute("ng-model"); var innerHtml = $(tElement)[0].innerHTML; var html = '<' + tAttrs.elemAsAttr + attrsText + '>' + innerHtml + '</' + tAttrs.elemAsAttr + '>'; var e = hasModel ? $compile(html)($scope) : html; $(tElement).replaceWith(e); }; } } });

我认为这不是最佳选择，但凭借我目前对代码的了解，我很感谢我找到了这个解决方案。 ✌

修改我现在正在使用ui-select：https://github.com/angular-ui/ui-select 绝对推荐它

修改我把代码放在代码框中

ngTagsInput在表单中使用自动完成并添加到db

1 个答案: