Question

  <body ng-controller="myCtrl">
<input type="checkbox" ng-model="loaded"/>
<select ng-model="list">
  <option ng-repeat="option in data.availableOptions" value="{{option.name}}">{{option.id}}</option>
</select>
{{list}}
<button ng-click="addtext()">Button</button>
<div id="container">
  <img id="profile" ng-src="{{list}}" ng-show="loaded"/>
</div>

This is my html. i want to animate the image appearance (fade out old image and fade in new image) when i select image from the dropdown list. how to acheive this in angular.

Answer 1

您可以使用ng-change而不是使用ng-model，并指向控制器范围内的函数。例如（该示例使用jQuery）：

<select ng-change="changePic()">

---------

$scope.changePic = function() {
    $('img#profile').fadeOut(500,
        function() {
            $scope.list = $('select').val();
            $('img#profile').fadeIn(500);
        }
    );
}

我没有测试过，可能无法正常工作。

Animate image on changing through dropdown selector angularjs

1 个答案: