AngularJS Typeahead 非选择

Question

我添加了 Angular Bootstrap 的 Typeahead。它工作正常，我想为其添加一项功能。 So when an item is selected I want to toggle the disability of other components only if something is selected in 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

您可以通过在selectedCityName 上调用$watch 来订阅您的ng-model 值的更改：

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

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

      $scope.isDisabled = value ? true : false;

  });

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

我希望这会有所帮助。