4

我正在为项目使用 Angular UI Bootstrap 预输入指令，并且我想根据预输入中选择的内容重定向到动态 URL。我正在尝试使用预输入作为搜索框。

我查看了文档（尝试使用 RTFM），所以我知道有一个typeaheadOnSelect可以使用的属性，但我不确定如何将它与链接联系起来。我正在使用对象的 JSON 文件，每个对象都有一个特定的 ID。我希望能够像这样直接在 typeahead 属性中链接：

<div class='container-fluid' ng-controller="TypeaheadCtrl">
        <input type="text" id="search" ng-model="selectedPerson" typeahead="person as person.name for person in person | filter:$viewValue" typeahead-min-length="3" typeaheadOnSelect="#/100_Ages/{{person.id}}" ng-init="" />
    </div>

但这没有用。我想我需要一个特定的控制器，但我不确定。typeahead 指令似乎工作得很好，所以我想有一个简单的解决方案，但我找不到它。

现在，我的 Typeahead 控制器如下所示：

function TypeaheadCtrl($scope, $http) {
  $http.get('person.json').success(function(data) {
      $scope.person = data;
      });
}

这个 plunkr显示了一切。我的这个项目的路由器是使用基于每个 JSON id 的动态 URL 设置的，如下所示：

angular.module('app', ['ui.bootstrap']).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/app/:personId', {templateUrl: 'partials/person.html', controller: DetailCtrl}).
    }]);
4

1 回答 1

3

您可以观察 selectedPerson 模型的变化。这是一个例子：

function TypeaheadCtrl ($scope, $http, $location, $log, $timeout) {
  $http.get('person.json').success(function(data) {
      $scope.person = data;
  });
  $scope.$watch('selectedPerson', function(newValue, oldValue) {
    if (newValue){
      $log.info('/100_Ages/' + $scope.selectedPerson.id);
      $location.path('/100_Ages/' + $scope.selectedPerson.id);
    }
  });
}

更新：更新到 v0.4.0 后，我能够做到这一点：

function TypeaheadCtrl ($scope, $http, $location, $log, $timeout) {
  $http.get('person.json').success(function(data) {
      $scope.people = data;
  });
  $scope.onSelect = function($item, $model, $label){
    $scope.$item = $item;
    $scope.$model = $model;
    $scope.$label = $label;
    $log.info($scope.$item);
    $log.info($scope.$model);
    $log.info($scope.$label);
    $location.path('/person/' + $scope.$item.id);
  }
}

然后在 HTML 中，我这样做了：

<input type="text" id="search" placeholder="Search for a name or age" ng-model="selectedPerson" typeahead="person.id as person.name for person in people | filter:$viewValue" typeahead-on-select="onSelect($item, $model, $label)" typeahead-min-length="3" ng-init="" />
于 2013-06-27T19:41:47.820 回答