Question

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

打开控制台以查看重置模型的函数被调用，但重置它的行为只进行一次。

此处正在运行的代码：https://jsfiddle.net/74exww04/497/

角：

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/

只应从范围中引用“对象”和“数组”。

选项卡可能导致Typeahead ng-model在Bootstrap UI

1 个答案: