-1

我希望我的搜索框使用我在下面用图像说明的标签进行搜索。我试过使用引导标签，它对我不起作用。

这就是我的搜索应该是什么样子

点击

4

2 回答 2

0

检查这个小提琴：

https://jsfiddle.net/elmacko/hu2yngat/55/

您可以更改过滤器以满足您的需求。此外，这当然可以进一步完善，但它会让您了解如何完成。

angular.module("app", [])
.directive("badgeSearch", function()
{
    return {
    restrict: "E",
    replace: true,
    template: `
        <div class='badge-search-container'>
          <a href='#' ng-click='removeBadge($index)'
             class='badge badge-primary search-badge'
             ng-repeat='badge in badges track by $index'>{{ badge }}
          </a>
          <form class='badge-search-form'>
             <input class='badge-search-input' type='text'
                    ng-model='search'>
             <button class='btn btn-primary' type='submit'
                     ng-click='addBadge()'>
               Add
             </button>
           </form>
         </div>`,
    controller: "badgeSearchController",
    scope: {},
    link: function(scope, element, attributes)
    {
        scope.badges = [];
      scope.search = "";

      if(attributes.ngModel)
      {
        scope.modelController = element.controller("ngModel");

        scope.modelController.$isEmpty = function(value)
        {
          return !value || value.length === 0;
        };

        scope.modelController.$render = function()
        {
          scope.badges = scope.modelController.$viewValue;
        };
      }
    }
  };
})

.controller("badgeSearchController", function($scope)
{
  $scope.addBadge = function()
  {
    if($scope.search)
    {
        $scope.badges.push($scope.search);
        $scope.search = "";
    }
  };

  $scope.removeBadge = function(index)
  {
    $scope.badges.splice(index, 1);

    // This will trigger ng-change to fire, even in cases where $setViewValue() would not.
    angular.forEach($scope.modelController.$viewChangeListeners, function(listener) {
      try {
        listener();
      } catch (e) {
        this.$exceptionHandler(e);
      }
    });
  };
})

.filter("badgeFilter", function()
{
    return function(items, badges)
  {
    if(!badges || !badges.length)
    {
        return items;
    }

    return items.filter(function(item)
    {
        return badges.indexOf(item) != -1;
    });
  };
})

.controller("mainController", function($scope)
{
    $scope.items = [
    "first",
    "second"
  ];
  $scope.badges = [];
});

html

<div ng-app="app" ng-controller="mainController">
  <badge-search ng-model="badges"></badge-search>

  <ul class="list-group">
    <li ng-repeat="item in items | badgeFilter:badges" class="list-group-item">{{ item }}</li>
  </ul>
</div>

css

.badge-search-input
{
  height: 100%;
  border: 0px;
  outline: none;
}

.badge-search-form
{
  display: inline-block;
}

.badge-search-container
{
  padding-left: 8px;
  height: 39px;
  margin: 16px;
  border: 1px solid black;
  border-radius: 0px 4px 4px 0px;
}

.search-badge
{
  margin-right: 8px;
}
于 2018-07-10T11:18:16.537 回答
0

使用ngTagsInput指令：

<html>
<head>
    <script src="angular.min.js"></script>
    <script src="ng-tags-input.min.js"></script>
    <link rel="stylesheet" type="text/css" href="ng-tags-input.min.css">
    <script>
        angular.module('myApp', ['ngTagsInput'])
            .controller('MyCtrl', function($scope, $http) {
                $scope.tags = [
                    { text: 'just' },
                    { text: 'some' },
                    { text: 'cool' },
                    { text: 'tags' }
                ];
                $scope.loadTags = function(query) {
                     return $http.get('/tags?query=' + query);
                };
            });
    </script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
    <tags-input ng-model="tags">
        <auto-complete source="loadTags($query)"></auto-complete>
    </tags-input>
</body>
</html>

关联

https://github.com/mbenford/ngTagsInput

于 2018-07-10T08:18:37.817 回答