Question

Tl; dr：当将布尔值翻转为绑定到ng-if属性的false时，具有ng-if属性的元素将保留在DOM中，直到选择了其他三个元素为止。一旦布尔值被翻转为假，为什么元素不会立即消失？

我有一个typeahead设置，其中一个typeahead-no-results boolean附加到一条警告消息，看起来像这样

<input class="full-width" id="customerParentInput" 
       ng-model="$ctrl.customer.customerParentId"
       uib-typeahead="option.value as option.key for option in $ctrl.customerLookupData.data | filter:$viewValue | limitTo:10"
       typeahead-no-results="$ctrl.noResultParent"/>
<label ng-if="$ctrl.noResultParent" class="text-danger">No results. Create new customers in the Customer page in the Settings tab.</label>

我认为对于typeahead来说，已知问题是当你有0个结果，而你清空文本框时，布尔值不会翻转回false。因此，使用空文本框，我的标签仍会显示在DOM中。

所以我设置了一个等待输入失去焦点的事件监听器。一旦它失去焦点，它会查看布尔值是否仍为真，以及文本框中是否有任何值。

这是代码。

setListener = () => {
    $('#customerParentInput').blur(() => {
        var inputVal: string = $('#customerParentInput').val();
        if (this.noResultParent === true && inputVal.length === 0) {
            this.noResultParent = false;
        }
    });
};

因此，这会强制我的标签附加的布尔值等于false。所以理论上这应该会让标签消失。

这是问题所在。标签将在DOM中保持可见，直到我点击DOM中的其他三个元素。

例如，

我在文本框中输入

没有找到结果，我会转移焦点，警告仍然有意义。

我回去，删除所有文字，失去焦点。

我的侦听器触发，布尔值设置为false，但标签仍然存在。

我点击三个不同的输入框，然后我的标签就会消失。

有谁知道为什么这是让我的标签消失的必要部分？一旦布尔值被翻转为假，我可以做些什么来使标签立即消失？

Answer 1

因此，为了修复输入文本为空时显示的标签，这可能会更好：

<label ng-if="$ctrl.noResultParent && $ctrl.customer.customerParentId.length > 0" class="text-danger">No results. Create new customers in the Customer page in the Settings tab.</label>

也许另一个问题可能已修复

意外的ng-ui-bootstrap预告行为

1 个答案: