时间戳

首页 > 解决方案 > 如何创建一个过滤器，在生成的数组中的每个元素周围格式化 HTML 标记？

javascript - 如何创建一个过滤器，在生成的数组中的每个元素周围格式化 HTML 标记？

问题描述

我有一个包含用户输入值的数组。输入的数量以及元素的数量基于按钮单击，如下所示：

<input type="text" id="genTxt" placeholder="Enter an item" ng-model="genExpr.genArrays[$index]" ng-repeat="genArray in genExpr.genArrays track by $index">
<button ng-click="addTxtField()">Add item</button>
<button ng-click="removeTxtField()">Remove item</button>

使用相关的 Javascript：

var app = angular.module("outputApp", []);

app.controller("outputCtrl", function($scope) {

$scope.genExpr = { genArrays: [] };

$scope.addTxtField = function() {
$scope.genExpr.genArrays.push('');
}

$scope.removeTxtField = function() {
$scope.genExpr.genArrays.pop('');
} 

});

我需要的是一个过滤器，它能够用 html 标签（例如 <li></li>）包装 genArrays 中的每个元素。到目前为止，我得到的最接近的是以下。

app.filter('liTag', function () {
return function (items) {
            return "<li>" + items + "</li>"
};
});

即使数组为空并且围绕整个数组，它也会创建标签。

<ul><li>test,test,test,test</li></ul>

相反，目标应该是这个。

<ul><li>test</li><li>test</li><li>test</li><li>test</li></ul>

我的其他尝试都失败了，包括过滤器有条件并在数组为空时返回“”的尝试。

我把它全部放在 plunker 中以便于查看。

https://plnkr.co/edit/8FVrcOwOgr1wze4By4Hz?p=preview

标签： javascripthtmlangularjsangularjs-ng-repeat

解决方案

您需要简单地遍历数组中的各个元素并li像这样添加标签。

var app = angular.module("outputApp", []);

app.controller("outputCtrl", function($scope) {

  $scope.genExpr = {
    genArrays: []
  };

  $scope.addTxtField = function() {
    $scope.genExpr.genArrays.push('');
  }

  $scope.removeTxtField = function() {
    $scope.genExpr.genArrays.pop('');
  }

});

app.filter('liTag', function() {
  return function(items) {
    var result = ""
    for (var item of items) {
      result += "<li>" + item + "</li>";
    }
    return result
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="outputApp" ng-controller="outputCtrl">

  <input type="text" id="genTxt" placeholder="Enter an item" ng-model="genExpr.genArrays[$index]" ng-repeat="genArray in genExpr.genArrays track by $index">
  <button ng-click="addTxtField()">Add item</button><button ng-click="removeTxtField()">Remove item</button>

  <textarea id="output">&lt;ul>{{ genExpr.genArrays | liTag }}&lt;/ul></textarea>

</div>

推荐阅读