$スコープが更新されているのに対し、新しいエントリが作成される

Question

テキストボックスに何かを入力してボタンを押すと、新しいエントリを追加したいのですが、最初に作成した同じエントリが更新されています。コード：

var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 
    $scope.ss = []; 
    $scope.getPlate = function() { 
    //$scope.plate1= abc; 
    $scope.ss = [ 
     {plate1: 'some plate 1'}, 
     {plate1: 'some plate 2'}, 
     {plate1: 'some plate 3'}, 
     {plate1: $scope.newplate} 
    ] 
    var i = 0;  
    for (i=0; i<$scope.ss.plate1.length; i++) { 
     alert(i); 
    } 
    } 
}); 

HTML：

<div ng-controller="myCtrl"> 
    <table> 
     <tr ng-repeat="xx in ss"> 
      <td> 
       {{xx.plate1}} 
      </td> 
      <td> 
      </td> 
     </tr> 
    </table> 
    <input type="text" ng-model="newplate"/> 
    <input type="button" ng-click="getPlate()"/> 
</div> 

助けてください。

Answer 1

$scope.ss配列の4番目のオブジェクトを上書きするだけです。あなたは、ボタンをクリックすると上の配列に新しいオブジェクトをプッシュする必要があります。

var app = angular.module("myApp",[]); 
app.controller("myCtrl", function($scope){ 

    $scope.ss = [ 
     {plate1: 'some plate 1'}, 
     {plate1: 'some plate 2'}, 
     {plate1: 'some plate 3'}, 
     {plate1: $scope.newplate} 
    ]; 
    $scope.addPlate = function(){ 
     $scope.ss.push({plate1: $scope.newplate}); 
     $scope.newplate = ''; //To clear the input box after adding a new item 
    }; 

}); 

HTML：

<div ng-controller="myCtrl"> 

    <table> 
    <tr ng-repeat="xx in ss"> 
     <td>{{xx.plate1}}</td> 
     <td></td> 
    </tr> 
    </table> 

    <input type="text" ng-model="newplate"/> 
    <input type="button" ng-click="addPlate()"/> 
</div>