【问题标题】:AngularMaterial md-chips : Dont show selected item in <md-autocomplete>Angular Material md-chips:不在 <md-autocomplete> 中显示所选项目
【发布时间】:2016-07-21 08:33:48
【问题描述】:

我正在尝试&lt;md-autocomplete&gt; 此处的示例md-chips

为了防止选中的项目进入&lt;md-autocomplete&gt;,我修改了querySearch函数如下:

function querySearch (query) {
    var results = query ? self.searchData.filter(createFilterFor(query)) : [];
    var finalResults = [];
    angular.forEach(results, function(result) {
        if($scope.selectedItems.indexOf(result.name) < 0) {
            finalResults.push(result);
            updateSelectedItems(result);    
         }
    });
    return finalResults;
}

但我的问题是,一旦我们选择了一个项目,控件就不会进入这个函数。有人可以解释一下如何解决这个问题吗?

【问题讨论】:

    标签: angularjs angular-material md-autocomplete md-chip


    【解决方案1】:

    我从这个文档中找到了解决方案:md-autocomplete

    我们只需要添加md-no-cache="true",用于每次搜索查询项时调用querySearch函数

    【讨论】:

    • 这仍然对我不起作用 :( 你能上传一个 jsfiddle 吗?
    【解决方案2】:

    对我有用的解决方案: md-autocomplete 上的 md-no-cache="true" 仍然是强制自动完成重新初始化 md-items 的必要条件; md-chips 应该设置 md-on-remove 和 md-on-append 并实现从列表中删除芯片,或将芯片添加到列表中;

    我的代码如下所示: HTML:

     md-on-remove="removeTagChip($chip)"
     md-on-append="appendTagChip($chip)"
    

    JS:

    $scope.removeTagChip = function (chip) {
        var chipPos = $scope.getPosition(chip.Id, $scope.ChipTags);
        if (chipPos < 0) {
            $scope.ChipTags.push(chip);
        }
    };
    $scope.appendTagChip = function (chip) {
        var chipPos = $scope.getPosition(chip.Id, $scope.ChipTags);
        if (chipPos > -1) {
            $scope.ChipTags.splice(chipPos, 1);
        }
        return chip;
    };
    

    $scope.getPosition 只是返回芯片在芯片列表中的位置;

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-08-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多