在$ scope数组的Objects上使用.push（）不会将推送的对象添加到数组中

Question

我正在尝试接受表单中的用户输入。我可以成功访问输入并可以将数据从对象打印到控制台，但是当我尝试将此对象推送到我存储在控制器中的对象数组时，它不起作用。

以下是我的代码的一小部分：

$scope.dogs = [
    {
      name: "Blinky",
      age: "2",
      owner: "Martha Franklin",
      vaccinated: "Y"
    },
    {
      name: "Spot",
      age: "4",
      owner: "Martha Franklin",
      vaccinated: "Y"
    }];

$scope.dog = {
      name: "",
      age: "",
      owner: "",
      vaccinated: ""
    };

$scope.savePet = function(){
  //console.log($scope.dog.name); This prints the name in the input HTML form
  $scope.dogs.push($scope.dog); //THIS DOESN'T STORE IN THE INFORMATION
};

就像我之前所说的那样，我试图将一个对象推到一个对象数组的末尾，它只是不起作用。这一切都发生在AngularJS模块的控制器中。

Answer 1

$scope.dogs = [
{
  name: "Blinky",
  age: "2",
  owner: "Martha Franklin",
  vaccinated: "Y"
},
{
  name: "Spot",
  age: "4",
  owner: "Martha Franklin",
  vaccinated: "Y"
}];

  $scope.dog = {
  name: "john",
  age: "44",
  owner: "rocky",
  vaccinated: "n"
};

$scope.savePet = function(){
 console.log($scope.dog.name); 
 $scope.dogs.push($scope.dog); //THIS DOESN'T STORE IN THE INFORMATION
 console.log($scope.dogs); 
 };

$ scope.dog value为null，因此无效... 在$ scope.dog中添加值。 你的代码很好。

Answer 2

原因是您正在尝试将相同的对象添加到数组中。 Array不使用相同的对象。需要创建一个新对象或复制（复制）以使其工作。

Answer 3

我不明白为什么这不适合你。我创建了一个JS fiddler来模拟你的代码并且它完美地工作。

http://jsfiddle.net/nirus/vgxg7yzz/2/

代码：

function DogController($scope) {
    $scope.dogs = [
    {
      name: "Blinky",
      age: "2",
      owner: "Martha Franklin",
      vaccinated: "Y"
    },
    {
      name: "Spot",
      age: "4",
      owner: "Martha Franklin",
      vaccinated: "Y"
    }];

$scope.dog = {
      name: "",
      age: "",
      owner: "",
      vaccinated: ""
    };

$scope.savePet = function(){      
      $scope.dogs.push($scope.dog); //THIS DOESN'T STORE IN THE INFORMATION
      console.log($scope.dogs[2]);
    };
}

HTML：

<div ng-app ng-controller="DogController">
    <div>Hello open your console to see the result</div>
    <input type="submit" ng-click="savePet()" value="Click Me"></input>   
</div>

结果：请参阅以下内容。

建议：如果它仍然无法正常工作，我建议您分叉上面的代码并进行相应修改并回发，以便我们可以更好地查看它。