如何使AngularStrap预先选择不可编辑

时间:2016-08-19 02:38:59

标签: javascript angularjs twitter-bootstrap angular-strap

我正在使用AngularStrap的先行元素:

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

当在预先输入中选择水果时,它会在预先输入中显示为可由用户编辑的字符串。我希望用户只能按照其确切的名称提交水果。如果用户选择apple,然后将字符串编辑为aple,我的应用会在提交时崩溃。

选择后,有没有办法让字符串在typeahead中不可编辑?用户应该能够通过从typeahead数组中选择另一个水果来更改他们的选择,因此第一个选择不应该是不可更改的。

1 个答案:

答案 0 :(得分:2)

因此,根据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;
    }    
}