1

私のコードは簡単です: 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>
4

0 に答える 0