angularjs引導預輸入回孩子

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

不要在typehead使用功能。還要注意模型屬性駱駝的情況。

<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); 
}