Question

我使用输入字段接受以逗号分隔的值，然后为每个以逗号分隔的值动态生成列表项。但是，我不希望将项目添加到列表中，直到它们后面有逗号。例如，如果我输入＆＃34; Dog，Cat，Fish＆＃34;在输入字段中，我不想要以下内容，因为我正在打字＆＃34; Cat＆＃34;

狗
的Ca

我想＆＃34; Cat＆＃34;只有在我之后加上一个逗号表示它是一个完整的条目时才被添加。

这是我用来实现此目的的代码。

      <input ng-list ng-model="labels" placeholder="Enter labels">
      <div>
        <ul>
          <li ng-repeat="label in labels track by $index">
          {{ label }}
          </li>
        </ul>
      </div>

Link to running example

实现这一目标的角度方法是什么？

Answer 1

执行此操作的一种方法是使用自定义过滤器来过滤ng-repeat项目，而不是依赖于ng-list指令。

请参阅以下代码的相关PLUNKER。

<强> HTML

<input ng-model="labels" placeholder="Enter labels" />
<div>
  <ul>
    <li ng-repeat="label in labels | completeList">
          {{ label }}
    </li>
  </ul>
</div>

<强> JAVASCRIPT

filter('completeList', function() {
  return function(items) {
    var list = [];
    if(items) {
      list = items.split(',');
      var last = list[list.length - 1];
      if(items.charAt(items.length - 1) != ',' || last.length === 0)
        list.pop();
    }
    return list;
  };
});

如何仅将完整项添加到此列表中

1 个答案: