如何使用角度添加到數組？

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（事件），它會正確輸出），它不會顯示。

首先我命名控制器EC和移動它的水平

<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或類似的東西來分享範圍，但這是我能夠工作的。