Question

我的输入绑定到对象line.product，但typeahead返回产品和供应商对的列表。当前ps.product as ps.product.code for ps in getProductSupplierRefList($viewValue)未返回预期的product。

<input ng-model="line.product"
                               class=" form-control"
                               typeahead="ps.product as ps.product.code for ps in getProductSupplierRefList($viewValue)"
                               typeahead-loading="isLoading"
                               typeahead-on-select="productSupplierSelected($item, line)"
                               typeahead-template-url="productSupplierRefList.html"/>

getProductSupplierRefList调用webapi并返回ProductSupplierRefModel的列表：

public class ProductSupplierRefModel
{

    public ProductRefModel Product { get; set; }

    public SupplierRefModel Supplier { get; set; }

}

产品代码在文本控制中有望：

有任何建议吗？

Answer 1

使用typeahead-input-formatter来显示代码。看起来像ps.product as ps.product.code不起作用???

<input ng-model="line.product"
                               type="text"
                               class=" form-control"
                               ng-keyup="getProductSupplierRefList($event)"
                               typeahead="ps.product as ps.product.code for ps in filterProductSuppliers"
                               typeahead-loading="isLoading"
                               typeahead-input-formatter="formatProduct($model)"
                               typeahead-wait-ms=500
                               typeahead-on-select="productSupplierSelected($item, line)"
                               typeahead-template-url="productSupplierRefList.html" />

格式化程序是：

$scope.formatProduct=function(model) {
        return model ? model.code : '';
    }

产品代码现在按预期显示：

Answer 2

不要在打印头中使用功能。还要注意模型属性驼峰的情况。

<input ng-model="line.product"
                           class=" form-control"
                           ng-keyup="getProductSupplierRefList($event)"
                           typeahead="ps.Product as ps.Product.Code for ps in productOptions"
                           typeahead-loading="isLoading"
                           typeahead-on-select="productSupplierSelected($item, line)"
                           typeahead-template-url="productSupplierRefList.html"/>



 $scope.productOptions = [];
$scope.getProductSupplierRefList = function(evt){
       var value = angular.element(evt.target).val();
       $http.get('url/' + value).then(funtion(response){
             $scope.productOptions = response.data;
        })
}
//test ps.Product.Code with _tojson(ps.Product.Code)
$scope._tojson= function(obj){
       return angular.toJson(obj);
}

angularjs bootstrap typeahead return child

2 个答案: