AngularJS类型前置预填充

我有一个typeahead，我想包含一个描述，但存储Id

我现在正在做这样的事情

            <input type="text"
                ng-model="SelectedWarehouse.Info"
                typeahead="whs.info for whs in warehouses($viewValue)"
                typeahead-on-select="POHeader.warehouseId=$item.id;"
                class="form-control input-sm "
                id="whs" placeholder="Warehouse"
                ng-disabled="isReadOnly"
                typeahead-wait-ms="500"
                ng-enter="say('hello');" />

---

有什么想法吗？

我想这样的办法可能行得通。您可以将typeahead绑定到集合而不是方法，并通过从服务器获取值在keypress上更新该集合。您还可以监视集合上的更改，以便知道何时将填充数据

请参见演示：

view.html

<div style="margin: 40px;">
<div ng-controller="WarehousesCtrl">
    <pre>query: {{query | json}}</pre>
    <pre>selectedWarehouse: {{selectedWarehouse | json}}</pre>
    <input
        class="form-control input-sm"
        ng-model="query"
        typeahead="warehouse.info for warehouse in warehouses | filter:$viewValue"
        typeahead-on-select="selectedWarehouse = $item;"
        ng-keypress="fetchWarehouses();"
    />
</div>
</div>

---

我做了我自己的工作，因为我不能让预人口工作与提前打字

我更改了填充POHeader的视图，以包含一个名为SelectedWarehouse的字段。这是我预先格式化的typeahead值，它看起来与从typeahead仓库列表返回的whs.info相同

---

虽然不太理想，但它很有效，我不能再浪费时间了。

$viewValue没有传递给fetchWarehouses。调用fetchWarehouses时，尚未填充$viewValue的值。ng模型也是如此。如果我更改ng keypress=“fetchNatures（query）”我会得到类似的结果。查询未定义或是先前的值。（如果我键入“A”查询未定义，如果我键入“AB”则查询为“A”，等等。）@D.Kermott你已经弄明白了吗？将在JSFiddle上创建一个示例。@D.Kermott更新了我的答案并包含了一个演示链接。演示链接不会使用数据预填充typeahead，因为变量已初始化为null。我有一个解决方法。我更改了视图以包含typeahead的显示数据（除了id字段）。这样，我可以绑定到模型中的显示数据并设置id字段。由于这仅仅是一个视图，显示变量无论如何都会被忽略。

<div style="margin: 40px;">
<div ng-controller="WarehousesCtrl">
    <pre>query: {{query | json}}</pre>
    <pre>selectedWarehouse: {{selectedWarehouse | json}}</pre>
    <input
        class="form-control input-sm"
        ng-model="query"
        typeahead="warehouse.info for warehouse in warehouses | filter:$viewValue"
        typeahead-on-select="selectedWarehouse = $item;"
        ng-keypress="fetchWarehouses();"
    />
</div>
</div>

.controller('WarehousesCtrl', ['$scope', '$http', '$q', function ($scope, $http, $q) {
    $scope.query = null;
    $scope.selectedWarehouse = null;
    $scope.warehouses = [];
    $scope.fetchWarehouses = function() {
        $http.jsonp(
            'http:/mysite.com/mywarehouses?q=' + $scope.query
        ).success(function(data){
            $scope.warehouses = data.warehouses;
        }).error(function(){
            // this request will fail so lets just set some dummy warehouses
            $scope.warehouses = [
                {id:1, info:"Toronto"},
                {id:2, info:"Tobermory"},
                {id:3, info:"Oshawa"},
                {id:4, info:"Ottawa"},
                {id:5, info:"Ajax"},
            ];
        });
    };

}]); 

   <input type="text"
        ng-model="POHeader.SelectedWarehouse"
        typeahead="whs.info for whs in warehouses($viewValue)"
        typeahead-on-select="POHeader.warehouseId=$item.id;"
        class="form-control input-sm "
        id="whs" placeholder="Warehouse"
        ng-disabled="isReadOnly"
        typeahead-wait-ms="500" />