当输入键按下输入时注入HTML

我有一个输入字段，当人们按下输入时，我希望字段被清空，并在下面用'x'图标打印它的值，以便随后将其删除，就像'搜索“在angel.co领域：https://angel.co/jobs 当输入键按下输入时注入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>

而我在我的控制器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>'); 
}

我有2个问题在这里：

1 - 我相信这些代码在打印时不会被编译，因此'ng-show'和'ng-click'非常有用 - 我该如何做这项工作？

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

非常感谢

来源

2014-03-27 Spearfisher

为什么不用角度而不是jQuery？

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

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

来源

2014-03-27 15:33:46 lante

当输入键按下输入时注入HTML

回答

相关问题