如何使AngularStrap預輸入選擇不可編輯

我使用AngularStrap的預輸入元素：如何使AngularStrap預輸入選擇不可編輯

<input type="text" ng-model="selectedFruit" bs-options="fruit for fruit in fruits" placeholder="Begin typing fruit" bs-typeahead>

當水果用它顯示在預輸入爲可以由用戶編輯的字符串預輸入選擇。我希望用戶只能以其確切名稱提交水果。如果用戶選擇apple，然後意外地將字符串編輯爲aple，那麼我的應用在提交時會崩潰。

有沒有辦法讓字符串不可編輯，一旦它被選中？用戶應該能夠通過從typeahead數組中選擇另一個水果來改變他們的選擇，所以第一個選擇不應該是不可改變的。

來源

2016-08-19 lsimmons

請問添加驗證的形式來檢查它是否是一個有效的水果是一個可能的解決方案，或者是，在這個特定用例還不夠嗎？ –

好主意，但我寧願通過使字符串不可編輯來解決問題。我認爲這可能會導致用戶惱火。 – lsimmons

有道理。你絕對可以使它不可編輯......這裏的訣竅是使其不可編輯，但仍然允許某人從前面的類型中選擇一個新選項（因爲他們需要編輯它才能做到這一點）。它可以跟蹤最後一個有效值並在當前值無效時切換回該值。這會起作用嗎？ –

所以，打算關閉上述盧克的建議，下面的解決方案是爲我工作：

HTML：

<div ng-repeat="pie in pies"> 
    <input type="text" bs-on-select="addSpelling" ng-blur="spellCheck()" bs-options="stock for stock in allBaskets" ng-model="pie.fruit" bs-typeahead> 
</div>

注意它需要bs-on-select="addSpelling"而不是bs-on-select="addSpelling()"因爲第二選項將導致在頁面加載時觸發的函數。

在控制器：

$scope.addSpelling = function(){ 
    this.scope.spelling = this.scope.$modelValue; 
} 

$scope.spellCheck = function(){ 
    if(this.pie.fruit == ""{ 
     return; 
    } 
    if(this.pie.fruit != this.spelling){ 
     this.pie.fruit = this.spelling; 
    }  
}

來源

2016-08-21 03:04:09 lsimmons

非常酷。很高興爲你工作！ –

如何使AngularStrap預輸入選擇不可編輯

回答

相關問題