角度控制器中的事件仅触发一次
问题描述:
我正在尝试实现角度版本的自动完成文本框。我找到了一些可行的例子,但没有一个表现出我得到的行为。角度控制器中的事件仅触发一次
自动完成功能本身工作正常。当选择建议的项目时,控件正确处理选择。尽管自动完成位继续工作,但随后使用该控件(在自动填充框中键入,进行选择)无法启用“选定”事件/条件。
这里是我的模块&控制器:
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>
任何帮助,将不胜感激!
UPDATE
固定的错误亚瑟指出后,我没有得到有关所选对象的任何信息。所以我设置页面输出整个对象,而不是指定的字段,我注意到我是获得有关所选对象的信息,以及后续的尝试。
所以这工作:{{SelectedUser}}
这并不:{{SelectedUser.Department}}
然后我看了看对象,并注意到其格式。它有“标题”和“描述”,描述内有它的键/值对。
所以,现在这个工程:{{SelectedUser.description.Department}}
就是这样。
答
因为你第一次设置$ scope.SelectedUser作为一个函数,但在里面你正在用对象重写同一个函数。所以下一次它不是一个功能,尝试重命名该功能:
$scope.setUser = function (selected) {
if (selected) {
$scope.SelectedUser = selected.originalObject;
}
}
我试过你的建议,它是有道理的。但是现在当我运行它时,所选用户根本不显示。 – Karl
用我的决议编辑了我的问题,依靠您的回答。谢谢! – Karl