使用 http.get 的提前输入示例

Question

当从 $http.get 调用中收集数据时，我正在尝试创建 bs3-typeahead 的工作示例，但我做不到。当我从 http.get 方法外部分配源时，我可以让它工作，但不能从内部分配。

我不知道我在这里错过了什么。任何帮助将不胜感激。这是我的代码，它具有非 http 版本。 plunker 或者从下面复制。谢谢

<!DOCTYPE html>
<html>    
<head>
  <!-- GOOD ORDER -->
  <!--    JQUERY      -->
  <script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <!--    TPEAHEAD    -->
  <script src="https://rawgithub.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.js"></script>
  <!--    ANGULARJS   -->
  <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <!--    UI-BOOTSTRAP-TPLS   -->
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
  <!--    ANGULAR-BOOTSTRAP-TYPEAHEAD     -->
  <script src="https://rawgithub.com/davidkonrad/angular-bootstrap3-typeahead/master/angular-bootstrap3-typeahead.js"></script>
  <!--    BOOTSTRAP   -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
  <div ng-app="bootstrap3-typeahead-example">
    <div ng-controller="sampleCtrl">
      <div>
        <h2>bootstrap3-typeahead example</h2>
        <h4>selected value: {{ value }}</h4> States:
        <input type="text" bs3-typeahead bs3-source="source" ng-model="value" />
        <br /> States (from http.get):
        <input type="text" bs3-typeahead bs3-source="source_http" ng-model="http_value" />
      </div>
    </div>
  </div>
  <script>
    (function(angular) {
      'use strict';
      angular.module('bootstrap3-typeahead-example', ['ui.bootstrap', 'bootstrap3-typeahead']).
      controller('sampleCtrl', ['$scope', '$http', function($scope, $http) {

        $scope.HttpTest = function() {
          $http.get('https://jsonplaceholder.typicode.com/posts')
            .then(
              function(data) {
                $scope.source_http = ['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 Carolina', 'North Dakota',
                  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
                  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
                  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
                ];
              },
              function(error) {
                console.log(error);
              });
        };

        $scope.source = ['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 Carolina', 'North Dakota',
          'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
          'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
          'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
        ];

        $scope.value = undefined;
        $scope.http_value = undefined;
        $scope.HttpTest();
      }]);
    })(angular);
  </script>
</body>
</html>

Answer 1

您应该使用 bs3-promise 而不是 bs3-source。

<input type="text" bs3-typeahead bs3-promise="source_http" ng-model="http_value" />

来自documentation：

bs3-promise does not actually use promises. If you specify bs3-promise then the directive will simply wait and $watch the referred $scope variable. Once the variable is set the typeahead is initialised. This also mean, that if you later on change the variable you are referring to in bs3-promise, then the typeahead will be reinitailised with the new variable as source. bs3-promise let you easily change source on the fly.

使用 http.get 的提前输入示例

Typeahead example using http.get

javascript

angularjs

typeahead.js

twitter-bootstrap-3