Hola por favor ayúdame soy nueva en angular js

Acabo de crear una función. Repito el contenido. creo una función que es agregar la siguiente sección de pestaña y eliminar esta sección. creo una misma función en otra pestaña, agrego la sección de pestaña anterior y elimino esta sección.

Pero creo que solo los datos copian esta función, no eliminan datos y no se muestran.

Por favor, ayúdame

Mi código es este

El código HTML es

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

El código Js ANgular es

// El código va aquí

var appan = angular.module('taskPanel', []);
appan.controller('TasksController', ['$scope', function($scope){
    $scope.tasksComplete = [
      { title: "I m first" },
      { title: "I m Second" },
      { title: "I m thrid" }
    ];


    $scope.tasksInComplete = [
      {title: "i m incompletred 1"},
      {title: "i m incompletred 2"},
      {title: "i m incompletred 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();
      };

}]);

Y Demo en vivo

0
Rohit Azad 4 sep. 2014 a las 10:31

3 respuestas

La mejor respuesta

Intente esto, use $ index para eliminar elementos en la matriz

  $scope.pushActive = function(index, item){
    $scope.tasksComplete.splice(index, 1);
    $scope.tasksInComplete.push(item);

  };

  $scope.pushInActive = function(index, item){
    $scope.tasksInComplete.splice(index, 1);
    $scope.tasksComplete.push(item);

  };

Plunker

http://plnkr.co/edit/fp3gcf9PlBi9XnpNYFZQ?p=preview

1
Kaken 4 sep. 2014 a las 07:15

Puedes usar ese enfoque:

Controlador:

 $scope.tasksComplete = [
   { title: "I m first"},
   { title: "I m Second"},
   { title: "I m thrid"}
 ];

 $scope.pushActive = function(item) {
   $scope.tasksComplete.splice(item,1);
 };

Veiw

ng-click="pushActive($index)"
2
bmazurek 4 sep. 2014 a las 07:18

Arregle su código y puede verlo aquí.

La redacción me estaba confundiendo. Una vez que cambié la redacción de Ver para que coincida con la redacción del controlador, fue bueno.

var appan = angular.module('taskPanel', []);
appan.controller('TasksController', ['$scope', function($scope){
  $scope.tasksInActive = [
    { title: "I m first" },
    { title: "I m Second" },
    { title: "I m thrid" }
  ];

  $scope.tasksActive = [
    {title: "i m incompletred 1"},
    {title: "i m incompletred 2"},
    {title: "i m incompletred 3"}
  ];

  $scope.pushActive = function(scope, item){
    $scope.tasksInActive = removeItemFromList(item, $scope.tasksInActive);
    $scope.tasksActive.push(item);
  };

  $scope.pushInActive = function(scope, item){
    $scope.tasksActive = removeItemFromList(item, $scope.tasksActive);
    $scope.tasksInActive.push(item);
  };

  function removeItemFromList(item, list){
    return list.filter(function(i){
      return i != item;  
    });
  }
}]);
1
frosty 4 sep. 2014 a las 07:15