角度输入绑定两个字段答案

【问题标题】：angular input bind two fields角度输入绑定两个字段
【发布时间】：2015-06-25 01:01:55
【问题描述】：

更新

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

我创建了一个带角度的组合框，并使用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();
}

【问题讨论】：

我的错，我刚刚明白你的意思。您希望搜索下拉输入保留搜索文本，但当您再次单击它时显示所有结果。
@zsherman 是的，没错
@zsherman 这很好，但它摆脱了过滤。我仍然希望在输入输入后启动过滤

标签： javascript jquery html angularjs

【解决方案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 正在创建子范围。解决这个问题的常用方法是使用“点”，但有时我想使用 $parent。

我已经编辑了你的fiddle

【讨论】：