Fatal编程技术网
  • javascript/
  • Javascript 如何在angularjs中使用标记进行搜索

Javascript 如何在angularjs中使用标记进行搜索

javascript angularjs

Javascript 如何在angularjs中使用标记进行搜索,javascript,angularjs,angularjs-directive,angular-ui-bootstrap,angularjs-3rd-party,Javascript,Angularjs,Angularjs Directive,Angular Ui Bootstrap,Angularjs 3rd Party,我想我的搜索框搜索使用标签，我已经说明了下面的图像。我试过使用引导标签，但它对我不起作用 这就是我的搜索结果 使用ngTagsInput指令： <html> <head> <script src="angular.min.js"></script> <script src="ng-tags-input.min.js"></script> <link rel="stylesheet" type="

我想我的搜索框搜索使用标签，我已经说明了下面的图像。我试过使用引导标签，但它对我不起作用

这就是我的搜索结果

使用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>


angular.module（'myApp'，['ngTagsInput']））
.controller（'MyCtrl'，函数（$scope，$http）{
$scope.tags=[
{text:'just'}，
{text:'some'}，
{text:'酷'}，
{text:'tags'}
];
$scope.loadTags=函数（查询）{
返回$http.get（'/tags？query='+query）；
};
});
检查这把小提琴：



您可以根据需要更改过滤器。此外，这当然可以进一步完善，但它会让您了解如何做到这一点


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;
        };
      }
    }
  };
})


html


请添加更多详细信息，并在您面临问题的地方共享代码。
我尝试过使用引导标签，但对我来说不起作用
如果您不说出您尝试过的内容，请发布一些代码当问题不包括任何错误代码时，很难回答有关代码中错误的问题。声明“它对我不起作用”是没有帮助的。请使用
require:“？ngModel”
来获取。看到和

.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 = [];
});



<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>



.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;
}