javascript - 如何动态设置 md-autocomplete 的必填字段

Question

尝试在自定义目录中使用 md-autocomplete。

我希望根据两个条件需要该字段。一个是初始化的(cond1)，一个是变化的(cond2)

我试过这样做: required="{{ cond1 && !cond2 }}"

但由于某些原因，md-autocomplete 始终是必需的，即使 cond1 最初是 undefined 或 false。它也不响应对 cond2 的值所做的更改。

验证器也不检查所选项目是否已设置。它只是检查字段中是否有文本。

ng-required 似乎什么都没做。

我有什么想法可以让这项工作成功吗？

编辑:

这是我的指令的 .html

<div ng-form="dummyForm">
    <md-autocomplete
            md-input-name="{{ctrl.fieldName}}"
            md-selected-item="ctrl.dummyItem"
            md-selected-item-change="ctrl.setSelectedItem()"
            md-search-text="ctrl.searchText"
            md-items="item in ctrl.querySearch(ctrl.searchText)"
            md-item-text="item.display || item"
            md-min-length="0"
            placeholder="{{ ctrl.placeholder }}"
            ng-disabled="ctrl.selectAll || ctrl.isDisabled"
            required="{{ ctrl.isRequired && !ctrl.selectAll }}">
        <md-item-template>
            <span>{{ item.display || item }}</span>
        </md-item-template>
        <md-not-found>
            No results.
        </md-not-found>
    </md-autocomplete>
</div>
<div class="label-wrapper">
    <label
            class="checkbox-label"
            ng-if="ctrl.selectAll !== null">
        <input
                type="checkbox"
                ng-model="ctrl.selectAll"
                ng-change="ctrl.checkSelectAll()">
        {{ ctrl.checkboxName ? ctrl.checkboxName : 'Select all' }}
    </label>
</div>

它基本上只是一个自定义输入字段，允许用户从列表中选择一个值或单击复选框以“选择所有”项目。选中复选框后，我不想再需要 md-autocomplete 字段。

Answer 1

如您在此 demo plnkr 中所见，它与 ng-required 一起工作得很好.

查看

<form name="myForm">
    <md-autocomplete 
        md-autoselect=true
        placeholder="What is your favorite place?"
        md-item-text="item.display"
        md-items="item in ctrl.items"
        md-menu-class="autocomplete-custom-template"
        md-min-length="2"
        md-delay="ctrl.throttle"
        md-search-text="ctrl.searchText"
        md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
        md-select-on-match=true
        md-match-case-insensitive=true
        md-selected-item-change="ctrl.selectedItemChange(item)"
        ng-required="ctrl.cond1 && !ctrl.cond2"
        md-selected-item="ctrl.selectedItem">

   {{ myForm.$error }}

   <div>
       <md-button type="submit">Submit</md-button>
   </div>
</form>

AngularJS Controller

myApp.controller('MyCtrl', function ($scope) {
    var vm = this;
    this.cond1 = true;
    this.cond2 = false;
});