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');" />

我从$ scope.warehouses函数获取的jsonp看起来像这样：（[{“id”：“10”，“info”：“Lakeland（10）”}，{“id”：“11”，“info”：“Denver（11）”}）当然还有适当的jsonp回调信息 - 这只是一个例子

它的草率部分是这样的：当屏幕打开时，$ 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绑定到集合而不是方法，并通过从服务器获取值来在keypress上更新该集合。您还可以查看集合的更改，以便了解何时填充数据。

请参阅演示：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的字段。这是我预先格式化的预先输入值，它看起来与从先行仓库列表返回的whs.info相同。

它不理想，但它有效，我不能浪费更多时间。

AngularJS Typeahead预填充

2 个答案: