更新 UI bootstrap 无法向 Typeahead 添加新建议

Question

我需要即时更新提前输入建议。 typeahead 不反映它绑定到的数组上的更改。我该如何解决？我正在使用 ui bootstrap

这是一个 jsfiddle 复制，添加值，尝试在 tyeahead 中输入它，没有更新

angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
  .controller('ModalDemoCtrl', function($rootScope, $scope, $log, $uibModal) {

    $scope.addName = function() {
        console.log("adding name" , $scope.name);
        $scope.fieldNames.push($scope.name);
    }

    $scope.fieldNames = [{name:"Paul"},{name:"Pamela"}, {name:"Adam"}, {name:"Atrium"}];
});

Answer 1

几件事

你正在将一个字符串压入数组，你应该压入一个名称为属性的对象而不是
你在 ng-repeat 上有一个限制过滤器限制你的可见建议，你可能想删除它，或者至少增加它

而不是

$scope.addName = function() {
    console.log("adding name" , $scope.name);
    $scope.fieldNames.push($scope.name);
}

做

$scope.addName = function(newName) { // <-- passing the $scope.name from the template
    console.log("adding name" , newName);
    $scope.fieldNames.push({ name: newName});
}

并编辑

uib-typeahead="field as field.name for field in fieldNames | limitTo:4 | filter:{name:$viewValue}"

到

uib-typeahead="field as field.name for field in fieldNames | filter:{name:$viewValue}"

Here is an updated fiddle

更新 UI bootstrap 无法向 Typeahead 添加新建议

Update UI bootstrap cannot add new suggestions to Typeahead

angular-ui-bootstrap

angular