私は現在、TwitterブートストラップとAngularjsを調和して使用するWebアプリケーションを開発しています。ただし、タイプアヘッドに問題があり、ngモデルとして使用しています。
入力時にすべてが正常に機能しますが、アイテムを選択すると(提案)、値が選択された後にテキストボックスの値を変更しない限り、値はAngularコントローラーに反映されません。タイプ->選択->タイプは機能しますタイプ->選択は機能しません。
HTML:
<form ng-submit="addAssignment(assignName)">
<div class="input-append">
<input type="text" placeholder="Type a name" ng-model="assignName" ng-change="dostuff()" data-provide="typeahead" data-source="{{ teamNames }}">
<button class="btn" type="submit">Add</button>
</div>
</form>
角度コード:
$scope.addAssignment = function(name) {
alert(name);
return;
}
モデル値がいつ変更されるかを確認するために、ng-change関数を追加しました。手動で入力する場合にのみ変更され、先行入力に表示されるリストから値が選択されている場合には変更されません。
この問題の解決に役立つ可能性のある対応に感謝します。ありがとう!
AngularStrap に、AngularJS v1.2 +のngAnimate
を活用するBootstrap3のネイティブ実装があります。
また、チェックアウトすることもできます。
angular(およびスタイリングのためのbootstrap css))のみに依存して、このネイティブな先行入力実装を作成しました。
ここのデモ: https://jsfiddle.net/bh29tesc/
角度ディレクティブ:
angular.module('app').
directive('typeahead', ['$compile', '$timeout', function($compile, $timeout) {
return {
restrict: 'A',
transclude: true,
scope: {
ngModel: '=',
typeahead: '=',
typeaheadCallback: "="
},
link: function(scope, elem, attrs) {
var template = '<div class="dropdown"><ul class="dropdown-menu" style="display:block;" ng-hide="!ngModel.length || !filitered.length || selected"><li ng-repeat="item in filitered = (typeahead | filter:{name:ngModel} | limitTo:5) track by $index" ng-click="click(item)" style="cursor:pointer" ng-class="{active:$index==active}" ng-mouseenter="mouseenter($index)"><a>{{item.name}}</a></li></ul></div>'
elem.bind('blur', function() {
$timeout(function() {
scope.selected = true
}, 100)
})
elem.bind("keydown", function($event) {
if($event.keyCode == 38 && scope.active > 0) { // arrow up
scope.active--
scope.$digest()
} else if($event.keyCode == 40 && scope.active < scope.filitered.length - 1) { // arrow down
scope.active++
scope.$digest()
} else if($event.keyCode == 13) { // enter
scope.$apply(function() {
scope.click(scope.filitered[scope.active])
})
}
})
scope.click = function(item) {
scope.ngModel = item.name
scope.selected = item
if(scope.typeaheadCallback) {
scope.typeaheadCallback(item)
}
elem[0].blur()
}
scope.mouseenter = function($index) {
scope.active = $index
}
scope.$watch('ngModel', function(input) {
if(scope.selected && scope.selected.name == input) {
return
}
scope.active = 0
scope.selected = false
// if we have an exact match and there is only one item in the list, automatically select it
if(input && scope.filitered.length == 1 && scope.filitered[0].name.toLowerCase() == input.toLowerCase()) {
scope.click(scope.filitered[0])
}
})
elem.after($compile(template)(scope))
}
}
}]);
使用法:
<input class="form-control" type="text" autocomplete="false" ng-model="input" placeholder="Start typing a country" typeahead="countries" typeahead-callback="callback" />
まあ、私は汚い回避策を作成しました。ここにある例に基づいて: https://groups.google.com/forum/#!topic/angular/FqIqrs-IR0w/discussion 、先行入力コントロール用の新しいモジュールを作成しました:
angular.module('storageApp', []).directive('typeahead', function () {
return {
restrict:'E',
replace:true,
scope:{
model:'=',
source:'&'
},
template:'<input type="text" ng-model="model"/>',
link:function (scope, element, attrs) {
console.log(scope.source);
$(element).typeahead({
source:scope.source,
updater:function (item) {
scope.$apply(read(item));
return item;
}
});
function read(value) {
scope.model = value;
}
} // end link function
}; // end return
}); // end angular function
データバインディングにいくつかの問題があり、自動入力オプションがAngularコントロールから収集され、この情報が準備される前にコントロールが作成されるという問題がありました。したがって、 html属性(データソース)をtypeaheadコントロールに追加し、コンストラクターで$ observe関数を設定します。
<typeahead id="addSupplier" model="addSupplier" placeholder="Skriv inn leverandør" class="typeahead" source="getSuppliers()" ></typeahead>
これは汚い解決策だと思うので、誰かがより良いアイデアを持っているなら、私はそれを聞いて大歓迎です:)。バグの説明はこちら: https://github.com/angular/angular.js/issues/1284
これは@zgohrの実装に基づいています
$('#your-input-id-here').change((event)->
angular.element("#your-input-id-here").scope().$apply((scope)->
scope.your_ng_model = event.target.value
)
)
別の選択肢
HTMLで
<form ng-submit="submitRegion()">
<input type="text" ng-model="currentRegion" id="region-typeahead" data-source="{{ defaultRegions }}" data-provide="typeahead"/>
<button type="submit" class="btn">Add</button>
</form>
コントローラーで
$scope.defaultRegions = ["Afghanistan", "Australia", "Bahrain", "New Zealand" ];
$scope.submitRegion = function(){
$scope.currentRegion = $('#region-typeahead').val();
$scope.addRegion(); //your add or click function you defined
$scope.currentRegion = ''; //clear
}
ここに私が使用した別の方法があります。それも汚れています。このコードはコントローラーにドロップできます。
$('#id_of_your_typeahead_input').change(function(event){
$scope.$apply(function(scope){
scope.your_ng_model = event.target.value;
});
$scope.your_ng_click_function();
});