angularjs使用数组

时间:2016-02-29 17:26:55

标签: angularjs

在开始之前,我会link my codepen,所以你可以在阅读之前先看一下:)

我制作了一个非常简单的应用来证明我的问题。 基本上当我有多个服务共享一个数组时,似乎angularjs将数组视为奇数的原始对象。 我必须链接代码,所以这是我的控制器和一开始的2个服务:

angular.module('bindingApp', [])

.controller('MainController', ['MainService', 'SelectionsService', function (service, selections) {

  // Map the controller to a variable
  var self = this;

  // Attach the model to our scope
  self.models = service.models;

  // Create a function that handles the changes the service in some way
  self.updateSelectedItems = function () {

    // Get our first item
    var models = selections.selected;

    // Loop through our selected items
    for(var i = 0; i < models.length; i++) {

      // Get our current model
      var model = models[i];

      // Change the properties
      model.status = 'Cancelled';
      model.colour = 'gray';
    }
  };

  // Reset everything
  self.reset = function () {
    selections.reset();
    service.reset();

    console.log('models in the controller', self.models);
  }

  // Map our function to our service function
  self.selectItem = selections.select;

  // Initialize our service
  service.init();
}])

.service('MainService', function () {

  // Create our service
  var service = {

    // Create the default model (empty array)
    models: [],

    // Populates our model
    init: function () {

      // Loop from 1 to 10
      for(var i = 0; i < 10; i++){

        // Create some object
        var model = {
          status: 'Live',
          colour: 'green',
          selected: false
        };

        // Push our model to our array
        service.models.push(model);
      }

      console.log('models in the service', service.models);
    },

    // Resets everything
    reset: function () {

      // Reset our array
      service.models = [];

      // Initialize
      service.init();
    }
  };

  // Return our service
  return service;
})

.service('SelectionsService', function () {

  // Create our service
  var service = {

    // Create a reference to our selected objects
    selected: [],

    // Our select function
    select: function (e, item) {

      // Create a reference to our selected items
      var selected = service.selected;

      // Update the selected status
      item.selected = true;

      // Push our item to our selected items
      selected.push(item);

      // Stop propagation
      e.stopPropagation();
      e.preventDefault();
    },

    // Resets our selected items
    reset: function () {
      service.selected = [];
    }    
  };

  // Return our service
  return service;
});

我已经创建了2个Codepens来尝试修复此问题。第一个将项目映射到封装 MainController 中的数组的对象。第二个做同样的事情,但 MainService 还有一个封装数组的对象。

有谁知道我能做些什么来让这个简单的笔工作?

2 个答案:

答案 0 :(得分:2)

行。这与Angular没什么关系。只是简单的JavaScript。

以下是发生的事情:

该服务初始化其模型数组。 service.models是一个包含对该数组的引用的变量。你有这个

service.models ---->  [firstArray]

然后控制器执行self.models = service.models;。因此它创建另一个指向同一数组的引用,由service.models引用:

service.models ---->  [firstArray]
                      ^
controller.models ----|

然后点击重置按钮,调出service.reset()service.models = [];。因此,它创建一个新数组并将其分配给其模型变量。你最终得到了

service.models ---->  []

controller.models --> [firstArray]

请注意,您永远不会让controller.models指向服务中的新数组。所以它仍然指向第一个数组,视图仍然显示第一个数组的元素。

因此,要么确保在调用reset()后重新初始化控制器的models变量:

controller.models = service.models;

或者您确保只删除reset()中原始第一个数组中的所有内容:

service.models.splice(0, service.models.length)

答案 1 :(得分:1)

看起来您不能通过引用新的空数组来重置模型数组,而是从中移除所有项目。

相反

static function assertEntityIsManaged(EntityManager $em, $entity) {
    $isManaged = $em->contains($entity);
    $entityClass = get_class($entity);
    $msg = "Expected entity of type $entityClass IS NOT Managed";
    assert($isManaged === TRUE, $msg);
}

static function assertEntityNotManaged(EntityManager $em, $entity) {
    $isManaged = $em->contains($entity);
    $entityClass = get_class($entity);
    $msg = "Expected entity of type $entityClass IS Managed";
    assert($isManaged === FALSE, $msg);
}

使用

// Reset our array
service.models = [];