Angular scope变量中的数组只有一个成员

我是AngularJS的初学者，并感谢Stackoverflow上的Angular社区，他愿意帮助像我这样的新手，我非常了解这一点非常感谢。Angular scope变量中的数组只有一个成员

今天我想添加一个功能，我昨天正在做的练习（可以找到here）。我想保留用户输入的数字对并将其显示为行列表的记录。为此，我介绍一些数字对象。按下按钮将当前对添加到阵列。

目前，它看起来像数组只包含成员，无论我做什么，以推动新成员。任何人都可以帮我找到我的错误吗？

var saApp = angular.module("saApp", []); 
 

 
saApp.controller('numberController', function($scope) { 
 
    $scope.numbers = []; 
 

 
    $scope.number = { 
 
    number1: 0, 
 
    number2: 0, 
 
    sumIt: function() { 
 
     var numberObject; 
 
     numberObject = $scope.number; 
 
     return parseInt(numberObject.number1) + parseInt(numberObject.number2); 
 
    } 
 
    }; 
 

 
    $scope.pushIt = function() { 
 
    if ($scope.number !== undefined) 
 
     $scope.numbers.push($scope.number); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="saApp" ng-controller="numberController"> 
 
    <input type="text" ng-model="number.number1" placeholder="Enter a number here"> 
 

 
    <input type="text" ng-model="number.number2" placeholder="Enter another number here"> 
 

 
    <br />{{number.number1}} + {{number.number2}} = {{number.sumIt()}} 
 

 
    <br /> 
 

 
    <br /> 
 
    <button ng-click="pushIt()">Push</button> 
 

 
    <div ng-repeat="number in numbers"> 
 
    {{number.number1}} + {{number.number2}} = {{number.sumIt()}} 
 

 
    <br /> 
 
    </div> 
 

 
</div>

来源

2016-02-26 Sandah Aung

我检查，如果是空 –

即使我删除它，阵列仍只有一个号码。 –

一个在当前的代码更改推入$scope.numbers阵列之前刚刚克隆$scope.number。

$scope. pushIt = function() { 
      if ($scope.number !== undefined) 
       $scope.numbers.push(angular.copy($scope.number)); 
     }

为什么我们应该在克隆之前进行克隆。

的$ scope.number对象始终是相同的。因此所有的数组中的元素都将具有相同的$$ hashkey，你会得到这个error

所以，你应该克隆或前推复制对象，以便数组中有新的元素对象。

工作代码here

来源

2016-02-26 04:22:31 Cyril

当我试图解决问题时，我正在得出这个结论。如果我将'numberObject = $ scope.number;'更改为'numberObject = this;'，事情会更好。 –

$scope.pushIt = function() { 
     if ($scope.number) 
      $scope.numbers.push($scope.number); 
    }

本守则

来源

2016-02-26 04:12:36

使用object其键为input字段中ng-repeat推替换您pushIt功能。每个重复的对象都有自己的范围，并会相应地更新出价值。

试试这个：

var saApp = angular.module("saApp", []); 
 

 
saApp.controller('numberController', function($scope) { 
 
    $scope.numbers = []; 
 
    $scope.pushIt = function() { 
 
    var obj = { 
 
     number1: 0, 
 
     number2: 0, 
 
     sumIt: function() { 
 
     return parseInt(this.number1) + parseInt(this.number2); 
 
     } 
 
    } 
 
    $scope.numbers.push(obj); 
 
    } 
 
    $scope.pushIt(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="saApp" ng-controller="numberController"> 
 
    <button ng-click="pushIt()">Push</button> 
 
    <div ng-repeat="number in numbers"> 
 
    <input type="text" ng-model="number.number1" placeholder="Enter a number here"> 
 
    <input type="text" ng-model="number.number2" placeholder="Enter another number here">{{number.number1}} + {{number.number2}} = {{number.sumIt()}} 
 
    <br /> 
 
    </div> 
 
</div>

Fiddle here

来源

2016-02-26 04:14:46 Rayon

Angular scope变量中的数组只有一个成员

回答

相关问题