角度输入绑定两个字段

Question

更新

我想过这个，这就是我想的。也许我可以在输入时(当我在输入框中输入时)过滤列表，而不是自动地使用这个过滤器。这个是可能的吗？

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

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

这可行吗？也许我可以将不同的作用域变量绑定到输入的值上？

这是小提琴：https://jsfiddle.net/mLsbmfb7/25/

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>

控制器和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--重复创建子范围。解决这个问题的通常方法是使用“点”，但有时我想使用$parent。

我编辑了你的小提琴