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

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

本文关键字:数组 angularjs 视图 显示 单独 表单 填充      更新时间:2023-09-26

我正在学习AngularJS和Ionic为一个学期的项目创建一个应用程序,但我很难找到向我展示如何解决问题的资源,所以我打电话给所有NG和Ionic的专业人士:

我正在尝试将一个事件添加到我的"homeCtrl"控制器中定义的事件数组中,并从使用控制器"createEventCtrl"的另一个名为"createEvent"的视图显示在我的"主页"视图中。

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

我的问题是:如何将使用"createEventCtrl"控制器的"createEvent"视图中的信息传递给使用"homeCtrl"的"home"视图上显示的数组?

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>

您需要一个角度服务。您在服务中创建事件,并且可以从所有控制器访问服务对象。

例如:

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"
          });
        }
      })