制表符可能导致 Typeahead ng-model 中断 Bootstrap UI

Question

在带有 Bootstrap UI 的 AngularJS 中，我意识到如果我在选项卡中预先输入（从静态数组中绘制），前者的模型就会被破坏并且例如，我无法重置它。它只是在我第一次尝试重置时起作用，然后它就像你 select 在 typeahead 中的值与你给它的模型分离。

打开控制台可以看到重置模型的函数被调用了，但是重置它的动作只完成了一次。

这里是运行代码：https://jsfiddle.net/74exww04/497/

Angular:

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

    $scope.selected = undefined;
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
    $scope.selected = $scope.states[10];

    $scope.resetModel = function() {
        $scope.selected = undefined;
      console.log('the function run');
    }

  });

HTML:

<div ng-app="ui.bootstrap.demo">
  <div ng-controller="DemoCtrl">

    <uib-tabset active="activeJustified" justified="true">
      <uib-tab index="0" heading="Zero">
        <h4>Static arrays</h4>
        <pre>Model: {{selected | json}}</pre>
        <input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
        <p ng-click="resetModel()">Click here to reset model "personSelected"</p>
      </uib-tab>
      <uib-tab index="1" heading="One">Justified content One</uib-tab>
      <uib-tab index="2" heading="Two">Justified content Two</uib-tab>
    </uib-tabset>


  </div>
</div>

Answer 1

这是 Angular 的一个问题，要解决这个问题，只需直接从“$scope”中取出所选值并将其包装在一个对象中，如下所示。

$scope.state = {"selected":undefined};

更新了工作 JSfiddle https://jsfiddle.net/7586cshh/1/

只能从范围中引用 'Objects' 和 'Arrays'。

制表符可能导致 Typeahead ng-model 中断 Bootstrap UI

Tabs possibly cause Typeahead ng-model to break in Bootstrap UI

angularjs

angular-ui-bootstrap