更新

Question

我正在尝试实现自动填充文本框的Angular版本。我找到了一些有用的例子，但似乎都没有表现出我得到的行为。

自动完成功能本身可以正常工作。选择建议的项目后，控件将正确处理选择。对控件的后续使用（在自动填充框中键入，进行选择）无法使用所选的＆＃39;事件/条件，尽管自动完成位继续有效。

这是我的模块＆amp;控制器：

var app = angular.module('myapp', ['angucomplete-alt']); //add angucomplete-alt dependency in app

app.controller('AutoCompleteController', ['$scope', '$http', function ($scope, $http) {

//reset users
$scope.Users = [];
$scope.SelectedUser = null;

//get data from the database
$http({
    method: 'GET',
    url: '/UserRoleAdministration/Autocomplete'
}).then(function (data) {
    $scope.Users = data.data;
}, function () {
    alert('Error');
})

//to fire when selection made
$scope.SelectedUser = function (selected) {
    if (selected) {
        $scope.SelectedUser = selected.originalObject;
    }
}

}]);

我猜这个问题就在那里，但我不知道它是什么。我在下面的视图中包含了一些内容，尽管似乎并没有那么大惊小怪：

        <div class="form-group">
        <div ng-app="myapp" ng-controller="AutoCompleteController">
            <div angucomplete-alt id="txtAutocomplete" pause="0" selected-object="SelectedUser" local-data="Users" search-fields="RegularName" placeholder="People Search" title-field="RegularName" minlength="2" input-class="form-control" match-class="highlight"></div>
            <!--display selected user-->
            <br /><br />
            <div class="panel panel-default" id="panelResults">
                <div class="panel-heading"><h3 class="panel-title">Manage Roles for {{SelectedUser.RegularName}}</h3></div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-2">
                            <img src="~/Images/avatar_blank.png" width="100%" />
                        </div>
                        <div class="col-md-4">
                            <div class="row">
                                <div class="col-md-4">Selected User:</div> <div class="col-md-6">{{SelectedUser.RegularName}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

任何帮助将不胜感激！

更新

在解决了Yaser指出的错误之后，我没有获得有关所选对象的任何信息。所以我设置页面输出整个对象，而不是指定的字段，我注意到我获取有关所选对象的信息，以及随后的尝试。

所以这很有效：{{SelectedUser}}
这不是：{{SelectedUser.Department}}

然后我看着对象并注意到它的格式。它有＆＃34;标题＆＃34;和＆＃34;描述＆＃34;，描述内部有它键/值对。

所以现在这可行：{{SelectedUser.description.Department}}

就是这样。

Answer 1

因为第一次将$ scope.SelectedUser设置为函数，但在其中，您正在使用对象重写相同的函数。所以下次它不再是一个函数，尝试重命名函数：

$scope.setUser = function (selected) {
    if (selected) {
        $scope.SelectedUser = selected.originalObject;
    }
}

角度控制器中的事件仅触发一次

更新

1 个答案: