Using AngularJS Trying to insert a in the middle

Question

Here, I'm trying to insert a tr tag under a selected tr tag.I managed to insert the tr in the table but it was in the bottom. This is a sample code:

"use strict";

(function(angular) {
    var app = angular.module('app', []);
    app.controller('MainController', MainController);

    MainController.$inject = ['$compile', '$scope', '$templateCache'];

    function MainController($compile, $scope, $templateCache) {
        var publishShown = false;
        var lastItemAppned;
        var vm = this;
        vm.targets = ['Single passenger', 'Single driver', 'All passengers', 'All drivers'];
        vm.items = ["Cheese", "Pepperoni", "Black Olives"];
        vm.cancel = cancel;
        vm.fruits = [{
            name: 'Orange',
            color: 'Orange',
            tree: 'Orange Tree!',
            origin: 'China'
        }, {
            name: 'Apple',
            color: 'Green',
            tree: 'Apple Tree!',
            origin: 'Moon'
        }];
        vm.message = 'Fruit store!';

        function appendTemplate(event) {
            if (publishShown) {
                removeLastAppend();
            }
            publishShown = true;
            var template = $templateCache.get('template.html');
            var compiledHtml = $compile(template)($scope);
            var parent = event.currentTarget.parentElement.parentElement.parentElement;
            parent.append(compiledHtml[0]);
        }

        vm.showOptions = function(event) {
            appendTemplate(event);
        }

        function removeLastAppend() {
            angular.element('#publish-template').remove();
        }

        function cancel() {
            removeLastAppend();
        }

    }
})(window.angular);





    
    
    
    
    
    
    
    
    
    
    



    
    
        {{vm.message}}
        
            
                Name
                Color
                Tree
                Origin
                Action
            
            
                
                    {{fruit.name}}
                    {{fruit.color}}
                    {{fruit.tree}}
                    {{fruit.origin}}

As you see, if you click the second options button, you'll not notice the problem, but if you click the first one, it adds a tr tag always in the bottom of the table!

My aim is to add the new tr under the selected on. Thanks in advance

Ashish Dhandharia · Accepted Answer

The ng-repeat is running on the tr element and you are looking to break the loop and insert another tr in the middle based on the row that was clicked on. To achieve this you need to break the table into 3 parts

TR ng-repeat on topFruits
TR row with option buttons (will be hidden initially)
TR ng-repeat on bottomFruits

Initially, you will need to assign all the fruits to topFruits and keep the bottomFruits null. Also keep the tr row with the option buttons hidden.

When the show Options button is clicked on a row, get the index of the row and then divide the fruits between topFruits and bottomFruits based on the index. Also make the row with buttons visible.

Here is a working demo

Here is the HTML body


    
        {{vm.message}}
        
            
               
                Name
                Color
                Tree
                Origin
                Action
              
            
            
                  
                    {{fruit.name}}
                    {{fruit.color}}
                    {{fruit.tree}}
                    {{fruit.origin}}
                    
                        
                    
                  
                  
                    
                      
                        
                          
                        
                      
                        
                      
                      
                        
                      
                      
                        
                      
                    
                  
                
                
                    {{fruit.name}}
                    {{fruit.color}}
                    {{fruit.tree}}
                    {{fruit.origin}}

Here is the controller code

 vm.fruits = [{
            name: 'Orange',
            color: 'Orange',
            tree: 'Orange Tree!',
            origin: 'China'
        }, {
            name: 'Apple',
            color: 'Green',
            tree: 'Apple Tree!',
            origin: 'Moon'
        }];
        vm.topFruits = vm.fruits;
        vm.bottomFruits = [];
        vm.message = 'Fruit store!';

        function appendTemplate(index) {

            if (vm.publishShown) {
                removeLastAppend();
            }
            vm.publishShown = true;
            vm.topFruits = [];
            vm.bottomFruits = [];
            document.getElementById('publish-template').style.display="block";
            for(i=0;i

Using AngularJS Trying to insert a <tr> in the middle

Answers (1)

Related Questions

Using AngularJS Trying to insert a &lt;tr&gt; in the middle

Answers (1)

Related Questions

Using AngularJS Trying to insert a <tr> in the middle