范围模型不会根据选择进行更新

时间:2015-09-17 12:55:45

标签: angularjs typeahead.js

我的控制器中有这个方法:

$scope.selectEscalationResponsible = function($user, $model, $label) {

        $scope.escalationResponsible = $user.user.first_name + ' ' + $user.user.last_name;

    };

此方法由此输入元素触发:

<input class="form-control" 
                    type="text" 
                    ng-model="escalationResponsible"
                    typeahead-wait-ms="200"
                    select-text-on-focus
                    typeahead-editable="false"
                    typeahead="value as (user.user.first_name + ' ' + user.user.last_name) for user in oppType.team_settings.users"
                    typeahead-on-select="selectEscalationResponsible($item, $model, $label)">
                <small translate>Start typing a name from the list below</small>

通过未更新输入字段的值来触发该方法。 我无法弄清楚原因。

1 个答案:

答案 0 :(得分:0)

一切似乎都很好。这是一个让你看一看的傻瓜 http://plnkr.co/edit/MnGM7ye8VV3jZ9G63RWc?p=preview

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {

  $scope.users =[{user: {first_name: "test", last_name: "last"}},{user: {first_name: "test2", last_name: "last2"}}];

  $scope.selectEscalationResponsible = function($user, $model, $label) {

        $scope.escalationResponsible = $user.user.first_name + ' ' + $user.user.last_name;

    };

});





<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<script type="text/ng-template" id="customTemplate.html">
  <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
  </a>
</script>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
  <input class="form-control" 
                    type="text" 
                    ng-model="escalationResponsible"
                    typeahead-wait-ms="200"
                    select-text-on-focus
typeahead-editable="false"
                    typeahead="value as (user.user.first_name + ' ' + user.user.last_name) for user in users" 
                    typeahead-on-select="selectEscalationResponsible($item, $model, $label)">
 {{escalationResponsible}}
</div>
  </body>
</html>