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變量中的數組只有一個成員

回答

相關問題