2015-07-11 44 views
0

如何在鍵入前觸發事件。我在下面的代碼中使用typeahead,當用戶在typeahead的下拉框中選擇任何用戶名時,我想在下面的文本框中填寫user.full_name。你有什麼建議在打字輸入中應該使用什麼事件。任何建議如何觸發鍵入的輸入事件

<div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
      <div class="form-group has-feedback" ng-class="showError(userform.username)"> 
       <label class="col-sm-4 control-label">{{'USER.USERNAME' | translate}}:</label> 
       <div class="col-sm-8"> 
       <input type="text" name="username" 
       ng-model="user.username" required ng-init="setTimeout($element.focus(), 500)" 
       typeahead="user as user.username for user in users | filter:$viewValue | limitTo:8" 
       typeahead-on-select="select($model)" 
       class="form-control"> 
       <span ng-show="showError(userform.username)" class="glyphicon glyphicon-remove form-control-feedback"></span> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
      <div class="form-group has-feedback" ng-class="showError(userform.full_name)"> 
       <label class="col-sm-4 control-label">{{'USER.FULLNAME' | translate}}:</label> 
       <div class="col-sm-8"> 
       <input type="text" class="form-control" name="full_name" ng-model="user.full_name"> 
       <span ng-show="showError(userform.full_name)" class="glyphicon glyphicon-remove form-control-feedback"></span> 
       </div> 
      </div> 
      </div> 
     </div> 

下面是我的控制器

.controller('AdminUsersController', ['$rootScope', '$scope', '$state', '$stateParams', '$modal', '$log', '$timeout', 'usersApi', 'policiesApi','workspacesApi', 'msg', '$filter', 
    function($rootScope, $scope, $state, $stateParams, $modal, $log, $timeout, usersApi, policiesApi, workspacesApi,msg, $filter) { 
    var self = this, 
     limit = 100, 
.... 

$scope.select = function (item) { 
     console.log('********* This is select '); 
     $scope.user.full_name = item.full_name; 
     console.log('foo', item); 
    }; 
    // Finally initialize the page 
    self.refresh(); 
... 
+0

可能重複在[selectMatch?]上使用[angular ui-bootstrap typeahead callback](http://stackoverflow.com/questions/16109364/angular-ui-bootstrap-typeahead-callback-on-selectmatch) – Freezystem

回答

0

的部分假設你正在使用AngularStrap預輸入,
觸發用戶輸入您只需要做:

$scope.$on('$typeahead.select', function(event, value, index, elem){ 
    $scope.user.full_name = value; 
}); 
+0

是的,我正在使用AngularBootStrap TypeAhead,但添加您建議的代碼不起作用 – kim2014

+0

[AngularBootStrap TypeAhead](http://angular-ui.github.io/bootstrap/#/typeahead)和[AngularStrap TypeAhead](http: //mgcrea.github.io/angular-strap/#/typeaheads)不一樣。這在你的問題中並不清楚。我會更新我的答案以考慮這一點。你能用你的控制器代碼更新你的問題嗎? – Freezystem

+0

謝謝!我使用Typeahead(ui.bootstrap.typeahead),但已經嘗試了上面的代碼,它也沒有工作。任何其他建議 – kim2014