javascript - Using AngularJS Trying to insert a <tr> in the middle -
here, i'm trying insert tr tag under selected tr tag.i managed insert tr in table in bottom. 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);<!doctype html> <html ng-app="app"> <head> <link data-require="bootstrap-css@3.*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" /> <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script data-require="tether@*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> <script data-require="angularjs@1.6.*" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script> <script data-require="angular-animate@1.6.*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-animate.js"></script> <script data-require="angular-touch@1.6.*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-touch.js"></script> <script data-require="ui-bootstrap@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.5.0.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller="maincontroller vm"> <script type="text/ng-template" id="template.html"> <tr id="publish-template"> <td colspan="5"> <div class="row"> <div class="col-sm-3"> <button class="btn btn-sm btn-success" ng-click="vm.command()">command</button> </div> <div class="col-sm-3"> <button class="btn btn-sm btn-primary" ng-click="vm.sell()">sell</button> </div> <div class="col-sm-3"> <button class="btn btn-sm btn-warning" ng-click="vm.eatsome()">eat some!</button> </div> <div class="col-sm-3"> <button class="btn btn-sm btn-danger" ng-click="vm.cancel()">cancel</button> </div> </div> </td> </tr> </script> <div class="container-fluid"> <h1>{{vm.message}}</h1> <table class="table"> <thead> <th>name</th> <th>color</th> <th>tree</th> <th>origin</th> <th>action</th> </thead> <tbody> <tr ng-repeat="fruit in vm.fruits"> <td>{{fruit.name}}</td> <td>{{fruit.color}}</td> <td>{{fruit.tree}}</td> <td>{{fruit.origin}}</td> <td> <button class="btn btn-primary" ng-click="vm.showoptions($event)">options</button> </td> </tr> </tbody> </table> </div> </body> </html>as see, if click second options button, you'll not notice problem, if click first one, adds tr tag in bottom of table!
my aim add new tr under selected on. in advance
the ng-repeat running on tr element , looking break loop , insert tr in middle based on row clicked on. achieve need break table 3 parts
- tr ng-repeat on topfruits
- tr row option buttons (will hidden initially)
- tr ng-repeat on bottomfruits
initially, need assign fruits topfruits , keep bottomfruits null. keep tr row option buttons hidden.
when show options button clicked on row, index of row , divide fruits between topfruits , bottomfruits based on index. make row buttons visible.
here working demo
here html body
<body ng-controller="mainctrl vm"> <div class="container-fluid"> <h1>{{vm.message}}</h1> <table class="table"> <thead> <tr> <th>name</th> <th>color</th> <th>tree</th> <th>origin</th> <th>action</th> </tr> </thead> <tbody> <tr ng-repeat="fruit in vm.topfruits"> <td style="background:#bbb">{{fruit.name}}</td> <td>{{fruit.color}}</td> <td>{{fruit.tree}}</td> <td>{{fruit.origin}}</td> <td> <button class="btn btn-primary" ng-click="vm.showoptionstop($index)">options</button> </td> </tr> <tr id="publish-template" style="display:none"> <td colspan="5"> <div class="row"> <div class="col-sm-3"> <button class="btn btn-sm btn-success" ng-click="vm.command()">command</button> </div> <div class="col-sm-3"> <button class="btn btn-sm btn-primary" ng-click="vm.sell()">sell</button> </div> <div class="col-sm-3"> <button class="btn btn-sm btn-warning" ng-click="vm.eatsome()">eat some!</button> </div> <div class="col-sm-3"> <button class="btn btn-sm btn-danger" ng-click="vm.cancel()">cancel</button> </div> </div> </td> </tr> <tr ng-repeat="fruit in vm.bottomfruits"> <td style="background:#fcc">{{fruit.name}}</td> <td>{{fruit.color}}</td> <td>{{fruit.tree}}</td> <td>{{fruit.origin}}</td> <td> <button class="btn btn-primary" ng-click="vm.showoptionsbottom($index)">options</button> </td> </tr> </tbody> </table> </div> </body> here 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<vm.fruits.length;i++) { if(i<=index) { vm.topfruits[i] = vm.fruits[i]; } else { vm.bottomfruits[i-vm.topfruits.length] = vm.fruits[i]; } } } vm.showoptionstop = function(index) { appendtemplate(index); } vm.showoptionsbottom = function(index) { appendtemplate(index+vm.topfruits.length); } function removelastappend() { document.getelementbyid('publish-template').style.display="none"; vm.publishshown = false; } function cancel() { removelastappend(); }
Comments
Post a Comment