AngularJS/CSS 将一个 div 移出，另一个移入同一个模态

Question

我正在开发一个应用程序并希望使用 AngularJs 来执行此操作：-

<div class="main">
<div class="one">Content 1 here ...</div>
<div class="two">Content 2 here ...</div>
</div>

div 1 包含一个按钮，单击该按钮会显示 div 2 并替换 div 1。

谁能帮助解决这个问题（我需要使用 ng-Animate 还是更好的 CSS 技巧）？

编辑：我会更清楚一点 div 1 有一个列表和一个名为 ADD 的按钮，单击它会带来一个位于 div 2 中的列表，我选择要添加的内容然后提交，div 1 中的列表出现更新。

Answer 1

Try this JS FIDDLE

HTML

<div ng-app="myApp">
<div ng-controller="listCtrl">
    <div class="one">
        <ul>
            <li ng-repeat="list in lists">{{list}}</li>
        </ul>
        <button ng-click="showOptions = !showOptions">{{showOptions?'Hide':'Show'}} Options</button>
    </div>
     <div class="two" ng-show="showOptions">
        <ul>
            <li ng-repeat="list in options" ng-click="add($index)">{{list}}</li>
        </ul>
    </div>
</div>

控制器

    var myApp = angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){

    $scope.lists =['Monday','Tuesday'];

    $scope.options =['Sunday','Saturday'];

    $scope.add = function(index){

        $scope.lists.push($scope.options[index]);
         $scope.options.splice(index,1);


    };

});