如何使 AngularStrap typeahead 选择不可编辑
How to make AngularStrap typeahead selection uneditable
我正在使用 AngularStrap 的预输入元素:
<input type="text" ng-model="selectedFruit" bs-options="fruit for fruit in fruits" placeholder="Begin typing fruit" bs-typeahead>
当在预输入中选择水果时,它会在预输入中显示为用户可以编辑的字符串。我希望用户只能通过确切名称提交水果。如果用户选择 apple
然后不小心将字符串编辑为 aple
我的应用程序将在他们提交时崩溃。
有没有办法让字符串在被选中后在预输入中不可编辑?用户应该能够通过从 typeahead 数组中选择另一个水果来更改他们的选择,因此第一个选择不应该是不可更改的。
所以,根据 Luke 上面的建议,以下解决方案对我有用:
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;
}
}
我正在使用 AngularStrap 的预输入元素:
<input type="text" ng-model="selectedFruit" bs-options="fruit for fruit in fruits" placeholder="Begin typing fruit" bs-typeahead>
当在预输入中选择水果时,它会在预输入中显示为用户可以编辑的字符串。我希望用户只能通过确切名称提交水果。如果用户选择 apple
然后不小心将字符串编辑为 aple
我的应用程序将在他们提交时崩溃。
有没有办法让字符串在被选中后在预输入中不可编辑?用户应该能够通过从 typeahead 数组中选择另一个水果来更改他们的选择,因此第一个选择不应该是不可更改的。
所以,根据 Luke 上面的建议,以下解决方案对我有用:
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;
}
}