在AngularJS中输入指令以获得链式输入自动填充

Question

现在我正在尝试使用angularJS编写一个表达式，这就像数学表达式一样。但当我试图给运营商提建议的时候，我被困住了。

例如，表达式可能如下所示：ABS(x)+Floor(y).

我试着使用typeahead指令，但建议只显示ABS(x)。当输入操作符"+“和”地板(Y)“时，没有任何建议。这是我的代码快照。如果有人能帮忙，我会很高兴的。谢谢!

联署材料：

$scope.explist = ['ABS(x)',  'Floor(y)']

HTML：

<div>
<input type="text" maxlength="100" ng-model="exp" typeahead="e for e in explist | filter:$viewValue | limitTo:8"  />
</div>

Answer 1

在阅读了你的评论后，我认为在你的情况下使用提前打字机是错误的。

-> 见jsbin <--

我建议使用ui-选择。您可以在数组中列出表达式，然后使用所选内容构建第二个数组。

由于需要使用多个运算符，所以可以为指令提供一个函数来显示可用选项。在这个例子中，我给出了

var modifiers = ['/', '+', '-', '*'];

这是控制器

    $scope.exp.available = ['ABS(x)', 'Floor(y)'];
    $scope.exp.formatted = function () {
        var holder = [];
        angular.forEach($scope.exp.available, function (thing) {
          holder.push(thing);
          for (i = 0; i < modifiers.length; i++) {
                    holder.push(modifiers[i] + thing);
                }
        });
        return holder;
    };

HTML

<ui-select multiple ng-model="exp.expressions" theme="select2" style="width: 300px;">
    <ui-select-match placeholder="Select...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="e in exp.formatted() | filter:$select.search">
      {{e}}
    </ui-select-choices>
  </ui-select>

您将需要角-sanatize，和ui-选择.我在这里为你创建了一个JSBin，http://jsbin.com/paqotiticu/2/edit?html,css,js,output

这只是一个开始，你可以开发的功能使用按键或删除元素，希望这有帮助和好运！