私のコードは簡単です:
ng-repeat="word in words | filter:searchText"
ng-model="searchText"
ほとんどの場合にうまく機能する入力があります。問題は、リストの最初の単語をフィルター処理してから消去すると、要素が復元されないことです。DOM Inspector には表示されますが、ページには表示されません。とにかく、DOM を操作すると、ウィンドウのサイズ変更、クリックなど、すべてが表示されます。Angular の問題ではなく、Bootstrap の問題のようです。このバグは IE や Firefox では発生しません。クロームのみ。どんな助けでも大歓迎です。
注: Twitter Bootstrap 2.3.2 を使用しており、Angular 1.0.7 と 1.1.5 の両方を試しました。
更新: Chrome for iOS でも同じことが起こります。iOS の Safari は問題なく動作します。本当に変...
重要な更新: HTML から Bootstrap.css を取り出すと、Chrome で ng-filter が正しく機能します。これで、angular が適切に機能し、検索入力フィールドに従って dom を更新していることを確認できます。そのため、問題は Bootstrap が提供する CSS であり、Chrome を不満にしているようです。
コード
//js
<script>
app.directive('showChildOnHover',
function() {
return {
restrict:'A',
link : function(scope, elm, attrs) {
scope.expanded = false;
elm.bind('click', function(e) {
if(scope.expanded){
setTimeout(function() {elm.children('.btn-group').hide('fast');}, 0);
scope.expanded = false;
}
else{
elm.children('.btn-group').show('fast');
scope.expanded = true;
}
scope.$apply();
});
}
};
});
app.directive('group', function() {
return {
restrict: 'E'
};
});
function GroupsCtrl($scope, fetchGroups, mySharedService) {
$scope.searchText = "";
$scope.groups = [{'GroupName':'Test Group'},{'GroupName':'Some Other Group'},{'GroupName':'Another Test'}];
}
</script>
//html
<div id="map-content" ng-controller="GroupsCtrl" class="form-horizontal row-fluid span12 ng-cloak" ng-cloak style="margin:0 0 0 0" ng-app='map'>
<group ng-animate="'animate'"
ng-repeat="group in groups | filter:searchText"
show-child-on-hover
ng-class="(expanded) ? 'expanded' : ''"
class="well group span12" style="padding: 5px">
<span>{{group.GroupName}}</span>
</group>
</div>