Question

这里的情况。我有一个角度引导下拉列表，显示一个＆＃34;组织列表＆＃34;被选中。它看起来像这样：

<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
  <span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" role="menu">
  <li ng-repeat="org in organizations | orderBy:'Name'"><a href="#" ng-click="pickNewOrg(org)">{{org.Name}}</a></li>
</ul>

我还获得了一个文本输入，允许输入组织名称，使用angular＆＃3引导输入和自定义验证器，以确保输入的组织实际上在我的组织列表中。它看起来像这样：

<input name="organization" 
  type="text" 
  ng-model="activity.org" 
  typeahead="org as org.Name for org in organizations | filter:$viewValue" 
  valid-organization/>

问题在于：如果在输入中输入文本（验证器的指令所在的位置），验证工作正常，但如果从中选择了对象，则不会调用验证下拉列表。因此，如果键入了错误的组织，则有效性将设置为false，但如果某个组织随后被单击出菜单，则它仍为false，未经验证。由于在下拉列表中点击的任何内容都有效，我想知道如何在按钮点击时重新使用我的验证器？或者也许另一种方法会更好？

Answer 1

我的应用程序遇到了同样的情况，如果该项目无效，我决定禁用我的添加按钮。就我而言，我知道有效对象有.id道具，所以我做了类似

的事情

    <input name="organization" 
  type="text" 
  ng-model="activity.org" 
  typeahead="org as org.Name for org in organizations | filter:$viewValue" />
  <button ng-click="doSomething()" ng-disabled="!activity.org.Name">Do Something</button>

如果输入了无效的组织，您在“activity.org”中只有一个没有“.Name”属性的文本值，因此该按钮将被禁用。

我不确定您在选定的组织中做了什么，但我希望它能为您指明方向。无论如何，我没有看到一种简单的方法让你在下拉列表中重复使用“有效组织”。

编辑：

您可以使用表单和输入的名称属性手动设置有效性，例如

$scope.formName.inputName.$setValidity('validOrganization',true);

实际上，它应该在你的场景中工作，即使没有它。这是尝试重新创建一个简单的小提示 - http://jsfiddle.net/B3WLH/ 如果可以的话，上传问题的最小小提琴。

Answer 2

我尝试了一天以上，但没有$setValidity能够按此问题的要求工作。而是有一个属性：

typeahead-editable="false"

预先输入库中的

可以完成哪种工作。它会在鼠标移出时清空输入框，并将validity设置为false。

使用Angular Bootstrap Dropdown进行自定义验证

2 个答案: