Can someone please assist me? I am new to AngularJS and need help with a function I created.
I have created a function that adds a next tab section and removes the current section. Similarly, I have another function that adds a previous tab section and removes the current one.
However, it seems like only the data is copied by this function and not removed or displayed.
Please lend me your expertise!
Here is my code:
HTML Code:
<body ng-app="taskPanel">
<div class="" ng-controller="TasksController">
<tabset panel-tabs="true" panel-class="panel-inverse">
<tab>
<tab>
<tab-heading> <span class="hidden-xs">ACTIVE</span> <span class="badge badge-primary">{{tasksComplete.length}}</span></tab-heading>
<div class="tasklist">
<ol class="panel-tasks">
<li ng-repeat="item in tasksComplete">
<a href="#" class="preview-question">
<i class="fa fa-eye">eye</i>
</a>
<label>
<span class="task-description">{{item.title}}</span>
<span class="label label-{{item.color || 'primary'}}" ng-show="item.label">{{item.label}}</span>
<div class="more-icn">
<div class="pull-left">
<button class="active-check" ng-click="pushActive(this, item)">Push to InActive Tab</button>
</div>
</div>
</label>
</li>
</ol>
</div>
</tab>
<tab>
<tab-heading> <span class="hidden-xs">InACTIVE</span> <span class="badge badge-primary">{{tasksComplete.length}}</span></tab-heading>
<div class="tasklist">
<ol class="panel-tasks">
<li ng-repeat="item in tasksInComplete">
<a href="#" class="preview-question">
<i class="fa fa-eye"></i>
</a>
<label>
<span class="task-description">{{item.title}}</span>
<span class="label label-{{item.color || 'primary'}}" ng-show="item.label">{{item.label}}</span>
<div class="more-icn">
<div class="pull-left">
<button class="active-check" ng-click="pushInActive(this, item)">Push To Active Tab</button>
</div>
</div>
</label>
</li>
</ol>
</div>
</tab>
</tabset>
</div>
</body>
AngularJS Code:
// Add your code here
var appan = angular.module('taskPanel', []);
appan.controller('TasksController', ['$scope', function($scope){
$scope.tasksComplete = [
{ title: "I'm first" },
{ title: "I'm Second" },
{ title: "I'm third" }
];
$scope.tasksInComplete = [
{title: "I'm incomplete 1"},
{title: "I'm incomplete 2"},
{title: "I'm incomplete 3"}
];
$scope.remove = function(scope){
scope.remove();
};
$scope.pushActive = function(scope, item){
$scope.tasksInComplete.push(item);
scope.remove();
};
$scope.pushInactive = function(scope, item){
$scope.tasksComplete.push(item);
scope.remove();
};
}]);
Check out the Live Demo