如果在 ui-select 中未选择任何内容，则禁用按钮

Question

我有这个代码来生成一个 ui-select：

<ui-select ng-model="newTask.work" theme="select2" class="form-control" title="Scegli un lavoro">
    <ui-select-match placeholder="Scegli un lavoro">{{$select.selected.label}}</ui-select-match>
        <ui-select-choices repeat="item in lavori | filter: $select.search">
                              <div ng-bind-html="item.label | highlight: $select.search"></div>
        </ui-select-choices>
</ui-select>

如果这个 ui-select 没有选择任何内容，我想禁用一个按钮，但是写这个不起作用

ng-disabled="!work"

我该怎么做？

谢谢。

Answer 1

正如其他人所说，Plunkr 会有所帮助。

出于兴趣，这有什么不同吗：

ng-disabled="!newTask.work || newTask.work.length == 0"

另一个提示：在开发过程中，当您遇到此类问题时，值得将其粘贴在您的网页上：

<pre>{{ newTask.work | json }}</pre>

它将向您显示绑定的 Angular 变量的原始值，因此您可以在您选择/取消选择 <ui-select> 控件中的项目时看到其值的变化。

希望这会有所帮助。

更新（看到 Plunkr 后）：

如果您将以下几行添加到您的 script.js，您会看到我建议的 pre 确实显示了您在下拉列表中选择的值，并且您可以从那里设置您的 ng-disabled 标志：

  $scope.newTask =
  { 
      work: null
  };

...当您在下拉列表中选择一个项目时，您的按钮将启用。

（这就是为什么我推荐 pre 想法的原因。它在您的 Plunkr 中什么也没有显示，即使在选择了一个项目之后，立即显示您的 Angular 变量没有绑定到选择，或者不存在。）