如何在过滤视图离子中添加ng-tags种类的视图？

Question

How to achieve this kind of filter view

我想创建我们使用ng-tags或任何其他库创建的组件以提供帮助。提前谢谢。

Answer 1

这是你想要的吗？

http://plnkr.co/edit/uGoVIUiDmEvyPdMA2gfc?p=preview

JS：

module.directive('processPercent', function() {
  return {
    templateUrl: 'processPercent.html',
    controller: function($scope) {
      $scope.percents = [
        'ALL',
        '10%',
        '20%',
        '30%',
        '40%',
        '50%',
        '60%',
        '70%',
        '80%',
        '90%',
        '100%'
      ];

      $scope.select = function(percent) {
        $scope.percent = percent;
      }
    },
    scope: {
      percent: '='
    }
  }
});

HTML：

<h3>PROCESS %</h3>
<button type="button" class="btn btn-sm" style="margin-right: 2px" ng-class="percent == p ? 'btn-primary' : 'btn-default'" ng-repeat="p in percents" ng-click="select(p)">
  {{ p }}
</button>

用法：

<process-percent percent="percent"></process-percent>