Shifting elements within a modal using AngularJS and CSS: Swapping one div out for another

Question

Shifting elements within a modal using AngularJS and CSS: Swapping one div out for another

I am currently developing an application and I am considering using AngularJs for this purpose:

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

Within div one, there is a button that, when clicked, reveals div two and replaces div one.

Can someone provide guidance on how to achieve this? (Should I use ng-Animate or perhaps another CSS technique)

EDIT: Allow me to clarify further Div one contains a list and an ADD button. When the ADD button is clicked, it displays a list within div two. I can then select items to add and submit them, resulting in an updated list being displayed in div one.

javascript html css angularjs

Answer 1

Answer №1

Check out this JS FIDDLE example

HTML Code Snippet

<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>

JavaScript Controller Code

    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);


    };

});

Answer 2

Check out this JS FIDDLE example

HTML Code Snippet

<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>

JavaScript Controller Code

    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);


    };

});

Shifting elements within a modal using AngularJS and CSS: Swapping one div out for another

Answer №1

Similar questions

Filter JavaScript elements by conditions and true/false values

What is the best way to call the app.js function from an HTML page in an Express.js environment

What are some techniques for streamlining and simplifying complex and repetitive JS/jQuery code?

The implementation of pipelining for server-side processing

Minimize the number of clicks needed to navigate using the HTML/JavaScript navigation

Styling with CSS to format a table so that each cell occupies one row when viewed on narrower

Learn the method of exhibiting array elements in a dropdown menu with React JS

Learning to integrate AngularJS with Web API responses can greatly enhance the functionality and user

What is the most effective way to add HTML from a dynamically loaded document using AJAX?

express middleware is not compatible with prototype functions

Can a dynamic component be assigned to the <Route> element in react-router-dom?

Having trouble with the JQuery scrollTop animation? Getting the error message "Cannot read property 'top' of undefined"?

Tips for aligning the navigation bar in the center

The battle of line-height versus padding for achieving vertical centering with one-lined text

The screen is cloaked in a dark veil, rendering it completely inaccessible with no clickable

The right alignment for ul and li styles is recommended for a cleaner appearance

Using Jquery to toggle the visibility of div elements with the same structure, but ensuring only one is

Unlocking the AngularJS variable within the template script

Updating divs automatically using Ajax without refreshing the page is not functioning as intended

What is the best way to ensure that the checkbox is not affected when you click on the area?