javascript – (Angular)将对象插入json数组

前端之家收集整理的这篇文章主要介绍了javascript – (Angular)将对象插入json数组前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试将新项添加到roleList json数组.
我尝试过push / concat,但它没有改变roleList数组.
有什么办法解决这个问题吗?
  1. // The javascript :
  2.  
  3. function RoleListCtrl($scope)
  4. {
  5. $('#myTab a[href="#role"]').tab('show');
  6.  
  7. $scope.newCompanyName ="";
  8. $scope.newPosition="";
  9.  
  10.  
  11. $scope.addRole = function()
  12. {
  13. var newRole = new function() {
  14. this.companyName = $scope.newCompanyName;
  15. this.position = $scope.newPosition;
  16. this.id = '';
  17. }
  18.  
  19. alert("test :"+newRole.companyName);
  20.  
  21. $scope.roleList = $scope.roleList.push(newRole);
  22. // I have also tried this : $scope.roleList = $scope.roleList.concat(newRole);
  23. }
  24.  
  25. $scope.roleList = [
  26. {"companyName": "Company 01","id":"1","position": "CEO"},{"companyName": "Company 02","id":"2","position": "Board of Director"},{"companyName": "Company 01","position": "Board of Director"}
  27.  
  28. ];
  29. }

下面是调用addRole()的按钮:

  1. <form class="form-horizontal">
  2. <div id="myModal" class="modal hide fade" ng-controller="RoleListCtrl">
  3.  
  4. <div class="modal-header">
  5. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  6. <h3>Add Role</h3>
  7. </div>
  8.  
  9. <div class="modal-body">
  10.  
  11. <div class="control-group">
  12. <label class="control-label pull-left" for="name">Company Name</label>
  13. <div class="controls">
  14. <input type="text" id="coyName" ng-model="newCompanyName" placeholder="Company Name">
  15. </div>
  16. </div>
  17.  
  18. <div class="control-group">
  19. <label class="control-label pull-left" for="name">Role</label>
  20. <div class="controls">
  21. <input type="text" id="newRole" ng-model="newPosition" placeholder="Role">
  22. </div>
  23. </div>
  24.  
  25. </div>
  26.  
  27. <div class="modal-footer">
  28. <a href="#" class="btn">Close</a>
  29. <a href="#" class="btn btn-primary" ng-click="addRole()">Save changes</a>
  30. </div>
  31.  
  32. </div>
  33. </form>
  34.  
  35. <div class="tab-pane" id="role" ng-controller="RoleListCtrl">
  36.  
  37. <a class="btn btn-primary" data-toggle="modal" data-target="#myModal"><i class="icon-plus icon-white"></i>Add New Role</a>
  38. <BR>
  39.  
  40. <table class="table table-bordered table-white spacer5">
  41. <tr>
  42. <th>company name</th>
  43. <th>position</th>
  44. <th>action</th>
  45. </tr>
  46.  
  47. <tr ng-repeat="eachRole in roleList">
  48. <td>{{eachRole.companyName}}</td>
  49. <td>{{eachRole.position}}</td>
  50. <td>
  51. <button ng-click="deleteRole($index)">delete</button>
  52. </td>
  53. </tr>
  54.  
  55. </table>
  56. <BR>
  57.  
  58. </div>

解决方法

这行是你的问题:
  1. $scope.roleList = $scope.roleList.push(newRole);

当你调用push时,它返回长度(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push).您实际上是将新角色推入其中,然后将roleList替换为数组的长度,从而丢失数组.

猜你在找的JavaScript相关文章