Question

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

这是我的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>

我的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>');
}

我有两个问题：

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

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

非常感谢

Answer 1

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

您可以添加指令来管理“回车”键：

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

然后改变你的代码：

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

你的控制器：

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

输入时按Enter键时输入HTML

1 个答案: