模型未在Angular UI type-ahead中刷新

时间:2017-02-28 13:39:45

标签: angularjs angular-ui-bootstrap angular-ui

要复制问题in this plunk,请在字段中输入任意内容,选择任意行,然后单击按钮"更改名称"。您将看到模型已更改,但Angular Type-ahead输入字段不反映模型。有什么想法吗?

HTML

  <input type="text" ng-model="ds" 
    uib-typeahead="ds as ds.name for ds in queryList($viewValue)" >

  <p>Model: {{ds}}</p>

  <button ng-click="changeName()">Change Name</button>

的Javascript

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {

    $scope.queryList = function(query) {
        return [ {id: 1, name: "aaa"}, 
                 {id: 2, name: "bbb"},
                 {id: 3, name: "ccc"}]
    };

    $scope.changeName = function(){
      $scope.ds.name = "New name";
    };

}); 

2 个答案:

答案 0 :(得分:0)

试试这个:

  <input type="text" ng-model="ds.name" 
    uib-typeahead="ds as ds.name for ds in queryList($viewValue)" >

答案 1 :(得分:0)

这是解决方案 - 重新创建整个对象:

$scope.changeName = function(){
  $scope.ds = {
    id: $scope.ds.id,
    name: "New name"
  };
};

PLUNK