在输入时输入按键时输入HTML

I have an input field and when people press enter I'd like the field to be emptied and its value printed below with an 'x' icon to delete it afterwards just like the 'search' field on angel.co: https://angel.co/jobs

我有一个输入字段,当人们按下回车时,我希望清空该字段,并在下面打印一个带有'x'图标的值,然后将其删除,就像在angel.co上的'搜索'字段一样:https:// angel.co/jobs

Here is my HTML:

这是我的HTML:

      <form ng-submit="searchAds(searchInput)">
        <input id="search-field"  type="search" placeholder="Start typing your search..." ng-change="searchRequest()" ng-model="searchInput"/>
      </form>
      <div id="search-tags"></div>

And my JS in my controller:

我的JS在我的控制器中:

$scope.searchAds = function(item){
    if (item === "") return;

    $scope.searchInput = "";
    $('#search-tags').append('<div ng-show="showDetails">' + item + '<div ng-click="showDetails = ! showDetails"> (my DVG icon here) </div></div>');
}

I have 2 problems here:

我这里有两个问题:

1 - I believe the code is not compiled when printed so the 'ng-show' and 'ng-click' are so working - how can I make this work?

1 - 我相信代码在打印时不会编译,所以'ng-show'和'ng-click'是如此有效 - 我怎样才能使这个工作?

2 - How can I make sure that when there are several tags, when clicking on my delete icon it hide only this specific tag?

2 - 如何确保当有多个标签时,点击我的删除图标时它只隐藏这个特定的标签?

Many thanks

1 个解决方案

#1

Why not angular instead of jQuery?

为什么不使用angular而不是jQuery?

You can add a directive to manage the "enter" key:

您可以添加指令来管理“输入”键:

angular.module('yourModule').directive(
    'ngEnter', 
    function () {
        'use strict';

        return function (scope, element, attrs) {
            element.bind("keydown keypress", function (event) {
                if(event.which === 13) {
                    scope.$apply(function (){
                        scope.$eval(attrs.ngEnter);
                    });

                    event.preventDefault();
                }
            });
        };
    });

And then change a bit your code:

然后改变你的代码:

<form ng-submit="searchAds(searchInput)">
  <input type="search" placeholder="Start typing your search..." ng-enter="add(searchInput)" ng-model="searchInput"/>
</form>
<div ng-repeat="tag in tags">
    <div>{{tag}}<div ng-click="delete(tag)">(my DVG icon here)</div></div>
</div>

Your controller:

$scope.add = function(item) {
  $scope.tags.push(item);
  $scope.searchInput = "";
}

$scope.delete = function(item) {
  var index = $scope.tags.indexOf(item);

  $scope.tags.splice(index, 1);
}

#1