AngularJS:使用输入字符过滤列表框

时间:2015-06-12 09:53:09

标签: javascript angularjs

我有一个要求是使用一些输入字符过滤组合框列表。
看起来像是在进行过滤而不是在我的代码中更新组合框模型。

<div data-ng-controller="mySimpleController">
            <div style="display: inline-block;">
                <div id="message-components"  style="float: right" data-ng-init="loadUsers()">
                    <div style="float: left">
                        <input type="text" data-ng-model="username" placeholder="Username"> <br/>
                    </div>

                    <div class="btn-group" style="display: inline-block;">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-target="#" >
                            <span >
                                {{ selectedUser.username }}
                                <b class="caret"></b>
                            </span>
                        </button>
                        <ul class="dropdown-menu pull-left">
                            <li data-ng-repeat="user in users | filter:username" data-ng-click="setSelectedUser(user.username)">{{user.username}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

控制器:

$scope.selectedUser = {username: "Select Username...", isSelectedUser: false};
$scope.setSelectedUser = function(username) {
    $scope.selectedUser.username = username;
    $scope.selectedUser.isSelectedUser = true;
};
$scope.loadUsers = function() {
$scope.users = [{username: 'ABC'}, {username: 'BCD'}, {username: 'CDE'}, {username: 'DEF'}, {username: 'EFG'}];
    };

0 个答案:

没有答案