Select2标记输入失去价值AngularJS

Posted 2023-05-07

【中文标题】Select2标记输入失去价值AngularJS

【英文标题】：Select2 tagging input loses value AngularJS

【发布时间】：2013-02-19 04:31:51

【问题描述】：

我有一个使用ng-switch 切换视图的应用程序，而切换视图时我的标记输入特别丢失了它的值并落入它的对象字符串中，我的其他输入都没有遇到这个问题：

HTML：

<input ui-select2="version2" 
        id="keywordsGlobal" 
        name="keywordsGlobal" 
        class="region-keywords input-xlarge" 
        data-ng-model="data.keywordsGlobal" 
        required-multiple />

JSON：

[  
     
      "id":"[object Object]",
      "text":"[object Object]"
   
]

有什么办法专门防止这种情况发生吗？

【问题讨论】：

你能提供一个 plunkr 或类似的例子吗？您可能需要在切换发生之前设置要应用的监视条件或函数，以专门将输入的值设置回您的范围 - 似乎插件正在将其更改为 Angular 不喜欢的东西？

没错，select2 只能看到标记输入的字符串值，而是存储为对象数组 - 使用 ng-switch 在视图之间切换时它会丢失其值 - 我将发布 plnkr跨度>

这里是小提琴：jsfiddle.net/whiteb0x/qdrjk 有问题的输入在第 2 步中，请注意，如果您循环执行这些步骤，值会更改为对象字符串 - 让我感到困惑！

【参考方案1】：

我在使用 ui-select2 时遇到了各种各样的问题，只写了一个简单的自定义指令，一切正常。如果其他人在 angular、select2 和标记方面遇到问题，我建议尝试一下。对我有用的是这样的模板：

<input type="text" tag-list ng-model="item.tags">

请注意 item.tags 是一个 javascript 数组，而不是逗号分隔标签的字符串或类似的东西。与自定义指令一起使用（不使用 ui-select2，只使用 select2）：

app.directive('tagList', function($timeout) 
  return 
    require: 'ngModel',
    restrict: 'A',
    link: function(scope, element, attrs, controller) 
      scope.$watch(attrs.ngModel, function(value) 
        if (value !== undefined) 
          element.select2('val', value);
        
      );

      element.bind('change', function() 
        var value = element.select2('val');
        controller.$setViewValue(value);
      );

      $timeout(function() 
        element.select2(
          tags: []
        );
      );
    
  ;
);

【讨论】：

这非常适合我在几个不同项目中尝试做的事情。一方面，我确实需要这个，但是对于我现在正在做的事情，我如何修改它以将列表锁定到存储在模型下的一组特定标签？我很难做到这一点

非常感谢丹，这正是我想要的。从遇到 ui-select2 的麻烦中幸存下来...

【参考方案2】：

在随后加载选择时，数据似乎没有正确加载。使用initSelect() 并手动将数据重新分配给选择似乎可以解决问题。

看看http://jsfiddle.net/qdrjk/111/

$scope.version2 = 
    tags : null,
    initSelection: function(elem, callback) 
        console.log(elem);
        var data = $scope.data.keywordsGlobal;
        callback(data);
    ,
    createSearchChoice : function(term, data) 
        if ($(data).filter(function() 
            return this.text.localeCompare(term) === 0;
        ).length === 0) 
            return 
                id : term,
                text : term
            ;
        
    

【讨论】：

哦，伙计，我一定很亲近，谢谢。我对这个应用程序有最后一个问题 - 请继续关注一些简单的问题;)

@Alex 您的小提琴现在无法正常工作，因为指向 AngularUI.js 资源的链接已损坏。工作链接：jsfiddle.net/qdrjk/111

希望 whiteb0x 可以，小提琴是基于他的代码，所以我没有副本。也一定是被某人专门删除的？