Angular JS - Jak mogę animować zmiany modelu?

Próbuję zrobić ładne przejście fadein + fadein po zmianie currentVertical. w nokaut był tak prosty, ale nie mogę tego rozgryźć tutaj. proszę pomóż.Angular JS - Jak mogę animować zmiany modelu?

poniższy kod wyświetla listę UL, która jest "związana" z tablicą cenników w polu $ scope.currentVertical po kliknięciu elementu LI, zmienna $ scope.currentVertical zostaje zmieniona, a lista UL aktualizowana odpowiednio. Działa to dobrze, ale chciałbym, aby cały element div #container znikał i znikał, gdy zmieniono wartość $ scope.currentVertical. Proszę o pomoc ...

Moje html:

<body> 
    <h1>Pricing Poll</h1> 
    <div ng-controller="VerticalsController"> 
     <div id="container"> 
      <h2>{{currentVertical.title}}</h2> 

      <ul> 
       <li ng-repeat="pricing in currentVertical.pricings"> 
        <a ng-click="currentVertical.selectPricing(pricing)">{{pricing.name}}</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</body>

mój javascript:

function VerticalsController($scope) { 

    $scope.verticals = [ 
    { 
     title:'internet', 
     pricings: [ 
      { 
       name: 'netvision', 
       monthly: 23 
      }, 
      { 
       name: 'hot', 
       monthly: 33 
      }, 
      { 
       name: '012', 
       monthly: 28 
      } 
     ] 
    }, 
    { 
     title:'cellular', 
     pricings: [ 
      { 
       name: 'cellcom', 
       monthly: 20 
      }, 
      { 
       name: 'pelephone', 
       monthly: 30 
      }, 
      { 
       name: 'orange', 
       monthly: 25 
      } 
     ] 
    }, 
    { 
     title:'banks', 
     pricings: [ 
      { 
       name: 'leumi', 
       monthly: 20 
      }, 
      { 
       name: 'poalim', 
       monthly: 30 
      }, 
      { 
       name: 'benleumi', 
       monthly: 25 
      } 
     ] 
    }]; 

    $scope.selected = [ 
    ]; 

    $scope.currentIndex = 0; 
    $scope.currentVertical = $scope.verticals[0]; 

    $scope.selectPricing = function(pricing) { 
    $scope.selected.push(pricing); 
    $scope.currentIndex++; 
    $scope.currentVertical = $scope.verticals[$scope.currentIndex]; 
    }; 

    /*$scope.remaining = function() { 
    var count = 0; 
    angular.forEach($scope.todos, function(todo) { 
     count += todo.done ? 0 : 1; 
    }); 
    return count; 
    };*/ 
}

Źródło

2013-02-08 Uri Abramson

Musisz użyć własnych lub stworzyć dyrektywy, aby rozpocząć zaawansowaną manipulację DOM, np. Animacje.

Oto skrzypce z żądaną animacją, używam zmiennej visible w zasięgu, aby wywołać blaknięcie, a usługa $ Timeout zmieni tylko wybraną jednostkę podczas fadeOut, może zostać ulepszona, aby przekazać limit czasu i wywołanie zwrotne jako dyrektywę opcja ...

Fiddle: http://jsfiddle.net/g/Bs66R/1/

JS:

function VerticalsController($scope, $timeout) { 

    $scope.verticals = [{ 
    title:'internet', 
    pricings: [{ 
     name: 'netvision', 
     monthly: 23 
    }, 
    { 
     name: 'hot', 
     monthly: 33 
    }, 
    { 
     name: '012', 
     monthly: 28 
    }] 
    }, 
    { 
    title:'cellular', 
    pricings: [{ 
     name: 'cellcom', 
     monthly: 20 
    }, 
    { 
     name: 'pelephone', 
     monthly: 30 
    }, 
    { 
     name: 'orange', 
     monthly: 25 
    }] 
    }, 
    { 
    title:'banks', 
    pricings: [{ 
     name: 'leumi', 
     monthly: 20 
    }, 
    { 
     name: 'poalim', 
     monthly: 30 
    }, 
    { 
     name: 'benleumi', 
     monthly: 25 
    }] 
    }]; 

    $scope.selected = [ 
    ]; 

    $scope.currentIndex = 0; 
    $scope.currentVertical = $scope.verticals[0]; 

    $scope.selectPricing = function(pricing) { 
    $scope.selected.push(pricing); 
    $scope.currentIndex++; 
    $scope.visible = false; 

    $timeout(function(){ 
     $scope.currentVertical = $scope.verticals[$scope.currentIndex]; 
     $scope.visible = true; 
    }, 1000); 
    }; 

    $scope.visible = true; 
} 

var fadeToggleDirective = function() { 
    return { 
    link: function(scope, element, attrs) { 
     scope.$watch(attrs.uiFadeToggle, function(val, oldVal) { 
     if(val === oldVal) return; // Skip inital call 
     // console.log('change'); 
     element[val ? 'fadeIn' : 'fadeOut'](1000); 
     }); 
    } 
    } 
} 

angular.module('app', []).controller('VerticalsController', VerticalsController).directive('uiFadeToggle', fadeToggleDirective); 

angular.bootstrap(document.body, ['app']); angular.bootstrap(document.body, ['app']);

HTML:

<h1>Pricing Poll</h1> 
<div ng-controller="VerticalsController"> 
    <div id="container" ui-fade-toggle="visible"> 
    <h2>{{currentVertical.title}}</h2> 

    <ul> 
     <li ng-repeat="pricing in currentVertical.pricings"> 
     <a ng-click="selectPricing(pricing)">{{pricing.name}}</a> 
     </li> 
    </ul> 
    </div> 
</div>

Źródło

2013-02-08 16:14:22 Guillaume86

Czy istnieje powód dlaczego UI-blaknięcie-przełącznik do 'visible' ustawić? Nie możesz po prostu ustawić go jawnie na 'visible', jak np.' $ Scope. $ Watch ('visible', function() {}) 'ponieważ' $ scope.visible' nie ma być w najbliższym czasie zmieniane. – Hengjie

Dyrektywy zwykle nie opierają się na konwencjach nazewnictwa w zakresie nadrzędnym, więc można użyć kilkukrotnie tej samej dyrektywy w tym samym zakresie (na przykład jeden związany z widocznym1, drugi z widocznym2). – Guillaume86

To dobre, ale przestarzałe podejście, ponieważ Angular obsługuje teraz animacje natywnie za pomocą nowej dyrektywy o nazwie ngAnimate. –

polecam użyć nowej dyrektywy ngAnimate zawartych w angularjs Core.

Czytaj więcej here

Źródło

2013-04-04 18:30:01

Wygląda na to, że ngAnimate ma wsparcie dla slideUp/Down dla elementu kontenera, dlatego też directvve nadal ma znaczenie http://jsfiddle.net/jv4cf6ex/ – bresleveloper

Angular JS - Jak mogę animować zmiany modelu?

Odpowiedz

Powiązane problemy