在AngularJS的控制器中将对象保存到数组中

Question

我一直在创建联系人列表网站，并且刚刚开始尝试实现添加联系人功能。 到目前为止，我已经使用表单和输入元素创建了页面，然后使用ng-click调用了一个函数，该函数理论上会将包含这些输入值的对象添加到控制器中已经存在的数组中。 由于某种原因，这不起作用，并且没有添加任何内容。

特别是，我在js / app.js文件和$ part。/ edit.html网页的$ scope.saveContact = function（）方面遇到了麻烦。 尝试添加联系人时单击“确认按钮”会调用saveContact函数，但结果存储不正确。 任何帮助表示赞赏。

在我的HTML中，我有以下代码（该代码在我的控制器中调用saveContact（）函数。

<a href="#/"><div class="confirm col-xs-6" ng-click="saveContact()">
    <h3>Confirm</h3>
</div></a>

在我的app.js文件中，我有一个空对象的声明和一个包含已具有值的对象的数组（用于显示已创建的联系人）。 我正在尝试使用.push（）添加到这些联系人，但是由于某种原因，它无法正常工作。

$scope.contact = { ... } //empty object that gets inputs from HTML
$scope.contacts = [ { ... }, ... ];
$scope.saveContact = function(){
    $scope.contacts.push($scope.contact);
};

此底部函数无法将联系人对象推送到联系人数组，我不明白为什么。

Answer 1

这是因为您为所有路由分配了相同的控制器。 您的saveContact函数可以正常工作，它将对象推入数组。 更改路线后，将立即创建控制器的新实例，因此丢失添加的对象。 您应该创建一个服务（单个）来存储对象，并将该服务作为对控制器的依赖项注入。 这样，数组将一直保留到页面加载为止。

app.service("storeContact", function(){
  var contacts = [];

  this.setContact = function(cnt){
    contacts.push(cnt)
  };

  this.getContact = function(){
    return contacts;
  }
});

并将其注入控制器中，并使用setContact和getContact方法更新联系人数组并检索联系人数组。

理想情况下，您应该为自己的路线设置单独的控制器。

Answer 2

问题出在您的app.config代码中。 您对所有模板都使用相同的控制器。

这不是必需的，因为您已经在与body相连的ng-controller提到了相同的内容

  <body ng-controller="AppController">
    <div ng-view></div>
    <script src="js/app.js"></script>
  </body>

对所有路径使用相同的控制器实质上是在更改路径时（重新）实例化控制器 ，这就是$scope.contacts.push($scope.contact);的原因$scope.contacts.push($scope.contact); 从/add调用时，对路由/无效。

contactListApp.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        controller: 'AppController',
        controllerAs: 'list',
        templateUrl: 'partials/list.html'
      })
       .when('/add', {
        controller: 'AppController',
        controllerAs: 'add',
        templateUrl: 'partials/edit.html'
      })
       .when('/edit/:id', {
        controller: 'AppController',
        controllerAs: 'edit',
        templateUrl: 'partials/edit.html'
      })
      .otherwise({
        redirectTo: '/'
      });
}]);

解决方法：

将单独的控制器用于单独的路由，或者使用服务来存储对象

要么

只需从路由配置中删除控制器和控制器即可，一切顺利。

更新的配置：

contactListApp.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'partials/list.html'
      })
       .when('/add', {
        templateUrl: 'partials/edit.html'
      })
       .when('/edit/:id', {
        templateUrl: 'partials/edit.html'
      })
      .otherwise({
        redirectTo: '/'
      });
}]);

在AngularJS的控制器中将对象保存到数组中

问题描述

2 个解决方案

解决方案1
2 2015-07-16 06:49:57

解决方案2
1 2015-07-16 07:06:27

在AngularJS的控制器中将对象保存到数组中

问题描述

2 个解决方案

解决方案1 2 2015-07-16 06:49:57

解决方案2 1 2015-07-16 07:06:27

解决方案1
2 2015-07-16 06:49:57

解决方案2
1 2015-07-16 07:06:27