Question

我添加了Angular Bootstrap的Typeahead。它运行正常，我想为它添加一个功能。因此，当选择一个项目时，我只想在Typeahead中选择某些内容时切换其他组件的残疾。问题是，如果我在第一个Typeahead中键入内容并且我没有选择任何内容，则不会触发任何事件。

这是组件的html。我想问的是我应该听哪个事件来实现这个功能？

<div class="form-group has-feedback" ng-controller="CitiesSearchController">
            <input type="text" id="cityCombo" ng-model="selectedCityName" placeholder="City"
                   data-typeahead="cities.CityName for cities in getCities($viewValue)"
                   data-typeahead-loading="loadingCities"
                   data-typeahead-min-length="1"
                   data-typeahead-wait-ms="0"
                   data-typeahead-on-select="onCitySelect($item, $model, $label)"
                   class="form-control" />
            <span ng-show="loadingCities" class="glyphicon glyphicon-refresh form-control-feedback"></span>
        </div>

我在想的是：我可以解雇一个ng-changed事件。因此，每当文本被更改时，它就会触发并触发事件，并在此基础上禁用其他组件。这是正确的方法吗？

Answer 1

您可以致电$watch上的selectedCityName来订阅ng-model值的变化：

在这里工作： http://plnkr.co/edit/sieXxn?p=preview

  $scope.$watch("selectedCityName", function(value) {

      $scope.isDisabled = value ? true : false;

  });

在这里要注意的一件非常重要的事情是，在我的示例中，我设置了typeahead-editable="false"以防止无效选择并将它们限制为原始数组中的选择。因此，除非进行有效选择，否则 $ watch事件将不会触发。您当然可以将其更改为true，但这会允许ng-model中我认为无效的任何虚拟输入。

我希望这会有所帮助。

AngularJS Typeahead on non selection

1 个答案: