Event in nur eckigen Controller nur einmal ausgelöst

Question

Ich versuche, eine eckige Version einer Autocomplete-Textbox zu implementieren. Ich habe einige Arbeitsbeispiele gefunden, aber keines scheint das Verhalten zu zeigen, das ich erhalte.

Die Autocomplete-Funktion selbst funktioniert einwandfrei. Wenn ein vorgeschlagenes Element ausgewählt ist, verarbeitet das Steuerelement die Auswahl korrekt. Nachfolgende Verwendungen des Steuerelements (Eingabe in die Autocomplete-Box, die eine Auswahl treffen) können das ausgewählte Ereignis/die ausgewählte Bedingung nicht aktivieren, obwohl das Autocomplete-Bit weiterhin funktioniert.

Hier ist mein Modul & Controller:

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; 
    } 
} 

}]); 

Ich vermute, das Problem dort ist, aber ich weiß nicht, was es ist. Ich schließe das Bit aus meiner Sicht unten, obwohl es scheint nicht viel, dort zu sein mit Aufheben:

 <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> 

Jede mögliche Hilfe würde geschätzt!

UPDATE

Nach dem Fehler Festsetzung Yaser wies darauf hin, war ich keine Informationen über das ausgewählte Objekt zu bekommen. Also habe ich die Seite so eingestellt, dass sie das gesamte Objekt und nicht die angegebenen Felder ausgibt, und ich bemerkte, dass Informationen über das ausgewählte Objekt und bei nachfolgenden Versuchen erhielt.

das funktionierte so: {{}} SelectedUser
Dies tat nicht: {{}} SelectedUser.Department

Dann schaute ich auf das Objekt und bemerkte sein Format. Es hatte "Titel" und "Beschreibung", und die Beschreibung hatte innerhalb es die Schlüssel/Wert-Paare.

So, jetzt das funktioniert: {{}} SelectedUser.description.Department

Und das ist es.

Answer 1

Weil Sie $ scope.SelectedUser das erste Mal als eine Funktion setzen, aber innerhalb derselben schreiben Sie die gleiche mit einem Objekt. Wenn das nächste Mal keine Funktion mehr ist, versuchen Sie, die Funktion umzubenennen: