Question

我正在尝试将新项添加到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"}

    ];
}

下面是调用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

这一行是你的问题：

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

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

Answer 2

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

Answer 3

您可以通过使用键值对创建对象来直接推送您的对象。

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

（Angular）将对象插入json数组

3 个答案: