(Angular) wstaw obiekt do tablicy json

Question

Próbuję dodać nowy element do tablicy json roli. Próbowałem push/concat, ale to nie zmienia tablicy roleList. Jakikolwiek sposób rozwiązania problemu?

// The javascript : 

function RoleListCtrl($scope) 
{ 
    $('#myTab a[href="#role"]').tab('show'); 

    $scope.newCompanyName =""; 
    $scope.newPosition=""; 


    $scope.addRole = function() 
    { 
     var newRole = new function() { 
      this.companyName = $scope.newCompanyName; 
      this.position = $scope.newPosition; 
      this.id   = ''; 
     } 

     alert("test :"+newRole.companyName); 

     $scope.roleList = $scope.roleList.push(newRole); 
     // I have also tried this : $scope.roleList = $scope.roleList.concat(newRole); 
    } 

    $scope.roleList = [ 
     {"companyName": "Company 01", "id":"1", "position": "CEO"}, 
     {"companyName": "Company 02", "id":"2", "position": "Board of Director"}, 
     {"companyName": "Company 01", "id":"1", "position": "CEO"}, 
     {"companyName": "Company 02", "id":"2", "position": "Board of Director"} 

    ]; 
} 

Poniżej znajduje się przycisk, który nazwał addRole():

<form class="form-horizontal"> 
<div id="myModal" class="modal hide fade" ng-controller="RoleListCtrl"> 

    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h3>Add Role</h3> 
    </div> 

    <div class="modal-body"> 

     <div class="control-group"> 
      <label class="control-label pull-left" for="name">Company Name</label> 
      <div class="controls"> 
       <input type="text" id="coyName" ng-model="newCompanyName" placeholder="Company Name"> 
      </div> 
     </div> 

     <div class="control-group"> 
      <label class="control-label pull-left" for="name">Role</label> 
      <div class="controls"> 
       <input type="text" id="newRole" ng-model="newPosition" placeholder="Role"> 
      </div> 
     </div> 

    </div> 

    <div class="modal-footer"> 
     <a href="#" class="btn">Close</a> 
     <a href="#" class="btn btn-primary" ng-click="addRole()">Save changes</a> 
    </div> 

</div> 
</form> 

<div class="tab-pane" id="role" ng-controller="RoleListCtrl"> 

        <a class="btn btn-primary" data-toggle="modal" data-target="#myModal"><i class="icon-plus icon-white"></i>Add New Role</a> 
        <BR> 

        <table class="table table-bordered table-white spacer5"> 
         <tr> 
          <th>company name</th> 
          <th>position</th> 
          <th>action</th> 
         </tr> 

         <tr ng-repeat="eachRole in roleList"> 
          <td>{{eachRole.companyName}}</td> 
          <td>{{eachRole.position}}</td> 
          <td> 
           <button ng-click="deleteRole($index)">delete</button> 
          </td> 
         </tr> 

        </table> 
        <BR> 

       </div> 

Answer 1

Linia ta jest problem:

$scope.roleList = $scope.roleList.push(newRole); 

Po wywołaniu pchania, zwróci długość (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) . W zasadzie wciśniesz do niego nową rolę, a następnie zastępujesz listę roli wartością długości tablicy, tracąc tablicę.

Answer 2

var currentList = $scope.roleList; 
var newList = currentList.concat(newRoleArray); 
$scope.roleList = newList; 

Answer 3

można bezpośrednio push obiekt poprzez obiekt z pary kluczy wartości.

$scope.addRole = function(){ 
var newRole = { 
    "companyName":$scope.newCompanyName, 
    "id":"", 
    "position":$scope.newPosition 
} 
$scope.roleList.push(newRole); 
}