Как добавить к массиву с помощью углового?

Question

Я довольно новый для развития углового и веб-дизайна в целом, и я не могу для жизни меня выяснить, что не так с моим кодом. По сути, я просто пытаюсь добавить в таблицу, которая использует ng-repeat, используя $ scope.arrayname.push. Дайте мне знать, если я что-то не понимаю. Вот соответствующие файлы:

Мой угловой файл:

var routerApp = angular.module('routerApp', ['ui.router']); 
... 
routerApp.controller('eventController', function($scope) { 

$scope.events = []; 
$scope.addEvent = function() { 

     $scope.events.push ({ 
     name: $scope.eventName, 
     start: $scope.startDate, 
     end: $scope.endDate, 
     location: $scope.locationid 
     }); 

     // Clear input fields after push 
     $scope.eventName = ""; 
     $scope.startDate = ""; 
     $scope.endDate = ""; 
     $scope.locationid = ""; 
}; 

}); 

и вот мой HTML файл, в котором вход идет:

<div class="jumbotron text-center"> 
    <h2>The Event Page </h2> 
</div> 
<div class="row"> 

    <div class="col-sm-6" ng-controller="eventController"> 
     <div ui-view="columnOne"></div> 
     <input value="" type="text" placeholder="Name of Event" ng-model="eventName"> 
     <input value="" type="text" placeholder="Start Date" ng-model="startDate"> 
     <input value="" type="text" placeholder="End Date" ng-model="endDate"> 
     <input value="" type="text" placeholder="Location" ng-model="locationid"> 
     <button ng-click="addEvent()">Add to Event List</button> 
</div> 


<div class="col-sm-6"> 
    <div ui-view="columnTwo"></div> 
    </div> 
</div> 

И данные должны быть outputed в таблице здесь:

<tbody> 
    <tr ng-repeat="event in events"> 
     <td>{{ event.name }}</td> 
     <td>{{ event.start }}</td> 
     <td>{{ event.end }}</td> 
     <td>{{ event.location }}</td> 
     <!---<td>{{ event.link }}</td>---> 
    </tr> 
</tbody> 

Я использую частичные виды с routerApp от углового. Вот мой плукер: http://plnkr.co/edit/FBoWuEQYhCwtTtNN9Wrk?p=preview

Любая помощь приветствуется!

Answer 1

Мне пришлось внести несколько изменений, чтобы заставить это работать. Основная проблема заключается в том, что область не сохраняется между табличным представлением и кнопкой, поэтому, несмотря на то, что значение привязано (вы можете console.log (события), и он будет выводиться правильно), он не отображается.

Сначала я назвал контроллер ес и переместил его на уровень

<div class="jumbotron text-center"> 
    <h2>The Event Page </h2> 
</div> 
<div class="row" ng-controller="eventController as ec"> 

    <div class="col-sm-6" > 
    <div ui-view="columnOne"></div> 
    <input value="" type="text" placeholder="Name of Event" ng-model="eventName"> 
    <input value="" type="text" placeholder="Start Date" ng-model="startDate"> 
    <input value="" type="text" placeholder="End Date" ng-model="endDate"> 
    <input value="" type="text" placeholder="Location" ng-model="locationid"> 
    <button ng-click="ec.addEvent()">Add to Event List</button> 
    </div> 

    <div class="col-sm-6"> 
    <div ui-view="columnTwo"></div> 
    </div> 
</div> 

Затем я изменил контроллер, чтобы указать на «это» вместо $ объема

routerApp.controller('eventController', function($scope) { 
     var ec = this; 
     ec.events = []; 
     ec.addEvent = function() { 
      ec.events.push ({ 
      name: $scope.eventName, 
      start: $scope.startDate, 
      end: $scope.endDate, 
      location: $scope.locationid 
      }); 

      // Clear input fields after push 
      $scope.eventName = ""; 
      $scope.startDate = ""; 
      $scope.endDate = ""; 
      $scope.locationid = ""; 
     }; 
}); 

И, наконец, я изменил ng-repeat для использования ec.events

<tr ng-repeat="event in ec.events"> 

Возможно, лучший способ сделать это с помощью службы s или что-то в этом роде, чтобы разделить область действия, но это все, что я мог приступить к работе.