AngularJS Typeahead prepopulation

Question

我有一个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');" />

我从$作用域得到的jsonp。仓库的功能是这样的:([{"id":"10"， "info": "Lakeland (10)")}， {"id":"11"， "info": "Denver (11)"}])当然还有适当的json回调信息——这只是一个示例

大意是这样的:当屏幕打开$scope。SelectedWarehouse没有填充任何内容。然后我写了一些东西来预填充SelectedWarehouse，但是必须有一个更好的方法来做到这一点，使用typeahead。

做这件事的正确/好的/最好的(选一个)方法是什么?

另一个问题是不知道何时我的异步调用将实际填充我的对象。承诺的承诺……我想我会尝试使用ng-change函数调用，希望当数据填充ng-change函数会触发…到目前为止，这还不起作用。我还没有完全完成这个实验…

这是我$resource工厂的一部分。我需要做些什么才能获得一个成功的电话?

 ipoModule.factory('SearchRepository', function ($resource) {
    return {
        get: function (txt) {
            return $resource('/api/Search?SearchText=' + txt).query()
        },
        getBuyers: function () {
            return $resource('api/Buyers').query()
        },
        getVendors: function () {
            return $resource('api/Vendors').query()
        },
        getVendorSearch: function (txt) {
            return $resource('api/Vendors/' + txt + "?callback=JSON_CALLBACK").query()
        }, ....

任何想法?

Answer 1

我想这样的东西可能会起作用。您可以将typeahead绑定到一个集合而不是一个方法，并通过从服务器获取值在按下键时更新该集合。您还可以监视集合上的更改，以便知道何时要填充数据。

参见Demo: http://jsfiddle.net/yfz6S/17/

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>

controller.js

.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"},
            ];
        });
    };
}]); 

Answer 2

我自己做了一个解决方案，因为我无法让预填充工作与提前输入。

   <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" />

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

这不是理想的，但它工作，我不能浪费更多的时间在这上面。