(Angular) 插入一个对象到 json 数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17416548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
(Angular) insert an object to json array
提问by Rudy
I am trying to add new item to roleList json array. I have tried push / concat but it does not change the roleList array. Any way to solve the issue?
我正在尝试向 roleList json 数组添加新项目。我试过 push / concat 但它不会改变 roleList 数组。有什么办法可以解决问题？
// 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"}
];
}
Below is the button that called the addRole() :
下面是调用 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">×</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>
回答by kalley
This line is your problem:
这一行是你的问题：
$scope.roleList = $scope.roleList.push(newRole);
When you call push, it return the length (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push). You're essentially pushing the new Role into it and then replacing roleList with the length of the array, losing the array.
当您调用 push 时，它会返回长度（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push）。您实际上是将新的 Role 推入其中，然后用数组的长度替换 roleList，从而丢失了数组。
回答by Treeskar
var currentList = $scope.roleList;
var newList = currentList.concat(newRoleArray);
$scope.roleList = newList;
回答by Sujeet Singh
you can directly push your object by making object with key value pair.
您可以通过使用键值对制作对象来直接推送您的对象。
$scope.addRole = function(){
var newRole = {
"companyName":$scope.newCompanyName,
"id":"",
"position":$scope.newPosition
}
$scope.roleList.push(newRole);
}
