Question

更新

我想到了这就是我在想的。也许我只能过滤输入列表（当我输入输入框时），而不是自动拥有此过滤器。这可能吗？

我用angular创建了一个组合框，我使用ng-model将范围变量绑定到我的输入。现在功能是，您可以在下拉列表中搜索项目。当您单击下拉列表中的某个项目时，该值将被复制到输入中。

但是，当我再次返回搜索输入时，它只会显示与搜索匹配的项目，这是预期的。但是当我再次点击输入时，我想这样做，输入中的文本保留在那里，但下拉列表显示所有结果。

这可行吗？也许我可以将不同的范围变量绑定到输入值？

HTML：

<div class='center' ng-app="myapp" ng-controller="appCont">
    <div class='form-box'>
        <div class='inputs-box'>
            <div>
                <span>First</span>
                <input type='text' ng-model="firstname"/>
            </div>
            <div>
                <span>Last</span>
                <input type='text' ng-model="lastname"/>
            </div>
        </div>
        <div class='add-button' ng-click="addPerson()">
            add
        </div>
    </div>
    <div class='ppl-list-title'>
        <div class='inputs-box'>
            <div class='inline-block-top find-word'>Find</div>
            <div class='inline-block-top'>
                <input id='filter-input' type='text' ng-model='filterText'/>
                <div>
                    <ul class='hidden'>
                        <li ng-repeat='person in people2 | filter:{fullName:filterText}'
                        ng-click='setInputValue(person.fullName)'>
                            <span class=''>{{person.fullName}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

controller和jquery：

var myapp = angular.module("myapp", []);
myapp.controller('appCont', function($scope) {
    $scope.firstname = "";
    $scope.lastname = "";
    $scope.fullname = function() {
        return $scope.firstname + ' ' + $scope.lastname;
    };
    var Person = function(){
        this.firstname = "";
        this.lastname = "";
        this.isActive = true;
        this.fullName = "";

    };
    function getFullName(first, last) {
            return first 
                + " " 
                + last
    };
    function getPerson(first, last, active) {
        var newPerson = new Person();
        newPerson.firstname = first;
        newPerson.lastname = last;
        newPerson.isActive = active;
        newPerson.fullName = first + ' ' + last;
        return newPerson;
    }; 
    $scope.addPerson = function() {
        var personToAdd = 
            getPerson($scope.firstname, $scope.lastname, true);
        $scope.people2.push(personToAdd);
        $scope.firstname = '';
        $scope.lastname = '';

    };
    $scope.setInputValue = function(full) {
        $scope.filterText = full;
    };
    $scope.people2 = [
        getPerson("first", "test", true),
        getPerson("second", "try", false),
        getPerson("third", "testing", true)];
});

$(document).ready(function() {
    $('#filter-input').on('focusin', function() {
        $('ul').slideToggle();
    });
    $('#filter-input').on('focusout', function() {
        $('ul').slideToggle();
    });
});

function stringFullTrim(word) {
    while(word.indexOf('  ') > -1) {
        word = word.replace('  ', ' ');
    }
    return word.trim();
}

Answer 1

通过使用假文本输入来更新真实过滤器。

<input id='filter-input' type='text' ng-model='temp' ng-keyup='filterText = temp'/>
<input id='filter-input' type='hidden' ng-model='filterText'/>

然后在选择时，将文本复制到其中并擦除过滤器，以便下一次搜索再次新鲜。

<li ng-repeat='person in people2 | filter:{fullName:filterText}'
    ng-click='setInputValue(person.fullName); $parent.temp = person.fullName; $parent.filterText = ""'>

您可能希望处理一些边缘情况，例如用户输入完整内容但未选择。

注意：使用$ parent是因为ng-repeat正在创建子范围。通常的解决方法是使用＆＃34; dot＆＃34;但有时我觉得使用$ parent。

我已编辑了您的fiddle

角度输入绑定两个字段

1 个答案: