Question

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

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

<!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实际上并没有使用承诺。如果你指定bs3-promise，那么指令将只是等待$ $观察引用的$ scope变量。设置变量后，将初始化typeahead。这也意味着，如果您稍后在bs3-promise中更改了您所指的变量，那么将使用新变量作为源重新初始化typeahead。 bs3-promise可以让您轻松地动态更改源代码。

使用http.get的Typeahead示例

1 个答案: