AngularJS UIB TypeAhead 将对象传递给表单但不绑定回来答案

【问题标题】：AngularJS UIB TypeAhead pass object to form but don't bind backAngularJS UIB TypeAhead 将对象传递给表单但不绑定回来
【发布时间】：2017-10-27 10:11:29
【问题描述】：

我有一个场景，我在每个重复表单元素上都有一个预先输入，其中包含 5 个输入字段，当我选择结果并填充输入字段时一切正常，但这不会更新模型（来源）

提前输入：

<input type="search"
                                       ng-model="product"
                                       ng-model-options="{ getterSetter: true }"
                                       typeahead-editable="true"
                                       typeahead-click-open
                                       typeahead-loading="product_Loading"
                                       typeahead-input-formatter="inputFormatter($model)"
                                       typeahead-min-length="0"
                                       typeahead-select-on-exact="true"
                                       typeahead-no-results="noResults"
                                       typeahead-popup-template-url="/app/directives/typeaheadDefaultTemplate.html"
                                       typeahead-popup-template-new="products"
                                       autocomplete="off"
                                       placeholder="Select product"
                                       uib-typeahead="tyh as tyh.name for tyh in typeahead($viewValue, 'products')"
                                       class="form-control no-border-right">

所选元素的收件人：

<input name="qty" type="number" ng-model="product.qty" class="qty form-control text-right" value="1">
<input name="price" type="number" ng-model="product.price" class="price form-control text-right" placeholder="0.00">
<input name="total" value="0.00" disabled type="number" class="total form-control text-right">

【问题讨论】：

这里更新模型（源）是什么意思？

标签： javascript angularjs

【解决方案1】：

第三个输入需要一个 ng-model 属性。

在 typeahead 中，ng-model 指的是搜索查询。如果您想更新产品对象并将其向下传递到其他输入，则必须以编程方式执行此操作，无论是在选择上还是在焦点上。

在你的 typeahead 中，将模型更新为 productSearchModel，然后添加以下属性

typeahead-on-select="onSelect($item, $model, $label, $event); productSearchModel = '';"

然后将类似的内容添加到您的控制器中

 $scope.onSelect = function (item, model, label, event) {
    product = model;
};

当用户选择一个选项时会触发。

【讨论】：