角度コントローラのイベントは一度だけ発生します

Question

私はオートコンプリートテキストボックスの角度バージョンを実装しようとしています。私はいくつかの実例を見つけましたが、私が得意とする行動を示すものはありません。

オートコンプリート機能自体は正常に動作します。提案されたアイテムが選択されると、コントロールは選択を正しく処理します。オートコンプリート・ビットは引き続き機能しますが、その後のコントロールの使用（オートコンプリート・ボックスでの入力、選択）は「選択された」イベント/条件に従わなくなります。

は、ここに私のモジュール&コントローラです：

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

Yaserが指摘したミスを修正した後、私は、選択したオブジェクトに関する情報を取得していませんでした。だから私は指定されたフィールドではなく、オブジェクト全体を出力するようにページを設定しました。はでした。選択したオブジェクトに関する情報を取得しました。

だから、これは働いていた：{{}} SelectedUser
これはしませんでした：{{}} SelectedUser.Department

それから私は、オブジェクトを見て、そのフォーマットに気づきました。それは "タイトル"と "記述"を持っていて、内部にはのキーと値のペアがありました。

だから今、これは動作します：{{}} SelectedUser.description.Department

そして、それはそれです。

Answer 1

初めて$ scope.SelectedUserを関数として設定しますが、その中に同じものをオブジェクトで書き換えているためです。次回は関数ではないので、関数の名前を変更してください。

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