使用表单填充数组并在单独的视图中显示数组 angularjs

Question

我正在学习 AngularJS 和 Ionic 来为学期项目创建应用程序，但我找不到资源来告诉我如何解决我的问题，所以我打电话给所有NG 和 Ionic 专业人士：

我正在尝试将一个事件添加到我的 'homeCtrl' 控制器中定义的事件数组中，并在我的 'home' 视图中从另一个名为 'createEvent' 的视图中显示，该视图使用控制器 'createEventCtrl'.

我可以通过单击 'home' 视图中的按钮来添加到数组，但是 'createEvent' 视图中调用相同函数 newEvent() 的按钮不起作用。

这是我的问题：如何将信息从使用 'createEventCtrl' 控制器的 'createEvent' 视图传递到显示在 'home' 视图上的数组，该视图使用'homeCtrl'?

JS:

 app.controller('createEventCtrl', function($scope) {

    $scope.newEvent = function () {
        $scope.events.push({
            title: "Event 3",
            description: "Event description",
            location: "Event Location",
            price: "Event price",
            category: "Event category",
            date: "Event date"
          })
        }

      })

 app.controller('homeCtrl', function($scope) {

        $scope.events = [];     //array of events displayed on home view

        $scope.newEvent = function () {   //function that adds an event to the array
          $scope.events.push({
            title: "Event 3",     //Simple test data
            description:"Event description",
            location: "Event Location",
            price: "Event price",
            category: "Event category",
            date: "Event date"
          })
        }
      })

HTML:

home.html:

<ion-view title="Home">

<ion-content padding="'true'" class="has-header">

    <div class = "buttons"> <button class="button" ng-click = "newEvent()"> New Event </button> </div>


    <div class="spacer" style="width: 300px; height: 50px;"></div>
    <ion-list>
        <ion-item ng-repeat="event in events" menu-close=""class="item-thumbnail-left" href="#/event1">
          <img>
          <h2>{{event.title}}</h2>
          <p>{{event.description}}</p>
          <p>{{event.location}}</p>
          <p>{{event.price}}</p>
          <p>{{event.category}}</p>
          <p>{{event.date}}</p>
            <a menu-close="" href="#/event1" class="button button-positive button-clear button-block ">Attend</a>
      </ion-item>
    </ion-list>
    <a menu-close="" href="#/login" class="button  button-icon  icon-right ion-log-out">Log Out</a>
</ion-content>
</ion-view>

createEvent.html

<ion-view title="Create Event">
<ion-content padding="'true'" class="has-header">
    <form ng-submit=newEvent(event)>
      <div class="list">
        <label class="item item-input">
            <span class="input-label">Event Name</span>
            <input type="text" placeholder="Enter event name" ng-model="event.title">
        </label>
        <div class="spacer" style="width: 300px; height: 8px;"></div>
        <label class="item item-input">
            <span class="input-label">Event Location</span>
            <input type="text" placeholder="Enter event address" ng-model="event.location">
        </label>
        <div class="spacer" style="width: 300px; height: 8px;"></div>
        <label class="item item-input" name="eventDate">
            <span class="input-label">Event Date</span>
            <input type="text" placeholder="MM/DD/YYYY" ng-model="event.date">
        </label>
        <div class="spacer" style="width: 300px; height: 8px;"></div>
        <label class="item item-input">
            <span class="input-label">Event Description</span>
            <input type="text" placeholder="Enter event description" ng-model="event.description">
        </label><div class="spacer" style="width: 300px; height: 8px;"></div>
        <label class="item item-input" name="event.price">
            <span class="input-label">Event Price $</span>
            <input type="text" placeholder="Enter price or 0 for free" ng-model="event.price">
        </label>
        <div class="spacer" style="width: 300px; height: 8px;"></div>
        <label class="item item-select">
            <span class="input-label">Event Category</span>
            <select>
                //Need to figure out how to make a list of categories
                //drop down and how to save the input choice into event.category

            </select>
        </label>
        <div class = "buttons"> <button class="button" ng-click = "newEvent()"> New Event </button> </div>
    </form>
</ion-content>
</ion-view>

Answer 1

您需要 angular 服务。您在服务中创建事件，并且可以从所有控制器访问服务对象。

例如：

angular.module('yourmodule')
.factory('eventService',
[
function(){
  var service = {};
  var events = [];

  services.addEvent = function(event){
    events.push(event);
  };

  service.getEvents = function() {
      return events;
  };

  return service;


}]);

然后，从您的控制器：

 app.controller('homeCtrl', function($scope, eventService) {

        $scope.events = eventService.getEvents();     //array of events displayed on home view

        $scope.newEvent = function () {   //function that adds an event to the array
          eventService.addEvent({
            title: "Event 3",     //Simple test data
            description:"Event description",
            location: "Event Location",
            price: "Event price",
            category: "Event category",
            date: "Event date"
          });
        }
      })

使用表单填充数组并在单独的视图中显示数组 angularjs

populating an array using a form and displaying the array in separate views angularjs

javascript

angularjs

ionic

angularjs-routing