如何使用Angular用bootstrap下拉菜单更新表单输入

Question

我尝试使用ub -dropdown来更新表单。当用户从下拉菜单中选择时，它应该在文本框中弹出。如果文本框没有自己的模型，似乎也不会有问题。

表单已经有自己的模型(vm. formdata . category)来使用POST到数据库。我需要文本输入，因为如果不能选择类别，他们可以创建一个新类别。

问题是如何做到这一点?如果使用<select>和<option>，完全没有问题

<input type="text" id="category" name="category" ng-model="vm.formData.category" class="form-control">
    <div class="btn-group" uib-dropdown>
      <button class="btn btn-default" uib-dropdown-toggle type="button" id="category">Category
      <span class="caret"></span></button>
      <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
          <li><a ng-repeat="cat in vm.data.cat" ng-click="vm.addModel(cat.category)">{{cat.category}}</a></li>
      </ul>
    </div>

JS

vm.addModel = function (select) {
        vm.formData.category = select;
};

我也尝试使用ng-change来更新模型，但这似乎不起作用。

Answer 1

使用ng-options和ng-change event，

 <select ng-model="selected" ng-change="addModel(selected)"  ng-options="cat as cat for cat in vm.data.cat">
 </select>