Question

我有一个 离子列表 ，其中的项目是 div ，其中包含多个要创建卡片的元素零件。该列表使用 ng-repeat 进行填充。当数组是静态的时，视图将按原样呈现，但是当更新数组时，将添加元素（列表下方的元素被按下），但它们不可见。我尽可能多地尝试使用$scope.$apply()，但没有运气。

非常感谢帮助。

更新

模板：

                <div class="item item-avatar">
                    <img src="img/arya.jpg" id="my-avatar">
                    <h2 id="my-time">{{i.Name}}</h2>
                    <p id="my-eta">Arriving in {{i.Bus}} minutes</p>
                </div>

                <div class="item tabs tabs-secondary tabs-icon-left">
                    <a class="tab-item" data-ink-color="#336699" data-ink-opacity="0.5" ng-click="aaa()">
                        <i class="icon ion-ios-alarm"></i> Alarm
                    </a>
                    <a class="tab-item" data-ink-color="#336699" data-ink-opacity="0.5">
                        <i class="icon ion-android-call"></i> Call School
                    </a>
                    <a class="tab-item" data-ink-color="#336699" data-ink-opacity="0.5">
                        <i class="icon ion-location"></i> Track
                    </a>
                </div>
            </div>
        </ion-item>
    </ion-list>
</ion-content>

JS：

app.controller('ChildrenListCtrl', function ($rootScope, $scope, $ionicModal, $ionicPopover, $timeout, $state, ionicMaterialInk, ionicMaterialMotion) {


ionicMaterialInk.displayEffect();
$scope.children = [];


$scope.items = [
    {
        "Name": "Sameer",
        "Bus": 1
    },
    {
        "Name": "Sameer",
        "Bus": 1
    }];

console.log("ChildrenListCtrl loaded");

var reset = function () {

    var inClass = document.querySelectorAll('.in');
    for (var i = 0; i < inClass.length; i++) {
        inClass[i].classList.remove('in');
        inClass[i].removeAttribute('style');
    }
    var done = document.querySelectorAll('.done');
    for (var i = 0; i < done.length; i++) {
        done[i].classList.remove('done');
        done[i].removeAttribute('style');
    }
    var ionList = document.getElementsByTagName('ion-list');
    for (var i = 0; i < ionList.length; i++) {
        var toRemove = ionList[i].className;
        if (/animate-/.test(toRemove)) {
            ionList[i].className = ionList[i].className.replace(/(?:^|\s)animate-\S*(?:$|\s)/, '');
        }
    }
};

var delay = 5;

$scope.ripple = function () {
    reset();
    document.getElementsByTagName('ion-list')[0].className += ' animate-ripple';
    $timeout(function () {
        ionicMaterialMotion.ripple();
    }, delay);
};

$scope.fadeSlideInRight = function () {
    reset();
    document.getElementsByTagName('ion-list')[0].className += ' animate-fade-slide-in-right';
    $timeout(function () {
        ionicMaterialMotion.fadeSlideInRight();
    }, delay);
};

$scope.fadeSlideIn = function () {
    reset();
    document.getElementsByTagName('ion-list')[0].className += ' animate-fade-slide-in';
    $timeout(function () {
        ionicMaterialMotion.fadeSlideIn();
    }, delay);
};

$scope.blinds = function () {
    reset();
    document.getElementsByTagName('ion-list')[0].className += ' animate-blinds';
    $timeout(function () {
        ionicMaterialMotion.blinds(); // ionic.material.motion.blinds(); //ionicMaterialMotion
    }, delay);
};

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromParams, toParams) {
    if (toState.name == "app.children-list") {
        console.log("Animating....");
        $scope.blinds();
    }
});


$scope.aaa = function () {
    $scope.items.push(
            {
                "Name": "Sameer",
                "Bus": 1
            })
};
$scope.$apply();

}）;

我调用aaa()函数将项添加到数组中。希望这会有所帮助。

更新ion-list时的不可见元素

0 个答案: