[英]Event in Angular Controller Only Fires Once
我正在嘗試實現自動完成文本框的Angular版本。 我找到了一些可行的示例,但似乎都沒有表現出我正在得到的行為。
自動完成功能本身可以正常工作。 選擇建議的項目時,控件將正確處理選擇。 盡管自動完成位繼續起作用,但該控件的后續使用(在自動完成框中鍵入內容,進行選擇)未能激活“選定”事件/條件。
這是我的模塊和控制器:
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}}
然后,我查看了該對象並注意到其格式。 它有“標題”和“說明”,並描述了里面的鍵/值對。
因此,現在可以使用了:{{SelectedUser.description.Department}}
就是這樣。
因為您是第一次將$ scope.SelectedUser設置為函數,但是在其中將對象重寫為同一對象。 因此,下次不再使用該功能時,請嘗試重命名該功能:
$scope.setUser = function (selected) {
if (selected) {
$scope.SelectedUser = selected.originalObject;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.