Error adding Item in function PUSH AngularJs

Question

Error adding Item in function PUSH AngularJs

Navigation

#1 by (1 votes)

0

Greetings!
I have the following error, I want to add a new object with the function Push() but I do not enter it correctly, I do not know what may be happening, I am new in angularjs

var app = angular.module('simpleTimeline', []);



app.controller('simpleTimelineController', function ($scope) {
    
    $scope.itemList = [];
    
    function setTestData() {
        var testItemList = [
            { date: '8/1/2014', time: '10:27 am', content: 'Este usuario registo una actividad, por favor revisarla' }
          ];
        
        for( var i = 0; i < testItemList.length; i++ ) {
            var item = testItemList[i];
            item.shortContent = item.content.substring(0, 235);
            if (item.content.length > 235) {
                item.shortContent = [item.shortContent, '...'].join('');
            }
            testItemList[i].activeContent = testItemList[i].shortContent;
            testItemList[i].active = false;
        }
        
        $scope.itemList = testItemList;
    }
    
    setTestData();

    $scope.addEvent = function() {
      $scope.itemList.push({
        date: '80/10/2017', 
        time: '12:00 am', 
        content: 'Esto es una prueba para saber si agrega el item o no'
      });
    };
});

<!DOCTYPE html>
<html>
  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.min.js"></script>

  </head>
  <body>
    <section ng-app="simpleTimeline" ng-controller="simpleTimelineController">
      <button type="button" ng-click="addEvent()">AGREGAR ESPACIO</button>
      <div><h2 style="text-align: center;">MI ESPACIO</h2></div>
          <div class="timeline">
              <li class="timeline-item" ng-repeat="item in itemList">
                  <div class="timeline-item-connector">
                  </div>
                  <div class="timeline-item-content">

                      <div class="timeline-item-header">
                          <div class="timeline-date">{{item.date}}</div>
                          <div class="timeline-time">{{item.time}}</div>
                      </div>
                      {{item.activeContent}}
                  </div>
              </li>
          </div>
        
    </section>
  </body>
</html>

javascript html angularjs

asked by zerokira 18.09.2017 в 17:25

source

1 answer

How to convert an IP to byte? Error using Javascript variable in Chart.js

score 1 · Accepted Answer

You are not specifying the activeContent property when you add the item with push :

var app = angular.module('simpleTimeline', []);



app.controller('simpleTimelineController', function ($scope) {
    
    $scope.itemList = [];
    
    function setTestData() {
        var testItemList = [
            { date: '8/1/2014', time: '10:27 am', content: 'Este usuario registo una actividad, por favor revisarla' }
          ];
        
        for( var i = 0; i < testItemList.length; i++ ) {
            var item = testItemList[i];
            item.shortContent = item.content.substring(0, 235);
            if (item.content.length > 235) {
                item.shortContent = [item.shortContent, '...'].join('');
            }
            testItemList[i].activeContent = testItemList[i].shortContent;
            testItemList[i].active = false;
        }
        
        $scope.itemList = testItemList;
    }
    
    setTestData();

    $scope.addEvent = function() {
      $scope.itemList.push({
        date: '80/10/2017', 
        time: '12:00 am', 
        content: 'Esto es una prueba para saber si agrega el item o no',
        activeContent : 'Esto es una prueba para saber si agrega el item o no'
      });
    };
});

<!DOCTYPE html>
<html>
  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.min.js"></script>

  </head>
  <body>
    <section ng-app="simpleTimeline" ng-controller="simpleTimelineController">
      <button type="button" ng-click="addEvent()">AGREGAR ESPACIO</button>
      <div><h2 style="text-align: center;">MI ESPACIO</h2></div>
          <div class="timeline">
              <li class="timeline-item" ng-repeat="item in itemList">
                  <div class="timeline-item-connector">
                  </div>
                  <div class="timeline-item-content">

                      <div class="timeline-item-header">
                          <div class="timeline-date">{{item.date}}</div>
                          <div class="timeline-time">{{item.time}}</div>
                      </div>
                      {{item.activeContent}}
                  </div>
              </li>
          </div>
        
    </section>
  </body>
</html>