Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

// 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() :

<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>
share|improve this question
 
You don't call .addRole() method. –  zerkms Jul 2 '13 at 2:36
 
I called the addRole and the alert shown... –  Rudy Jul 2 '13 at 2:37
 
so add it to the question. We cannot read your mind. For the current code - it's not modified because method isn't called. –  zerkms Jul 2 '13 at 2:38
 
I highly doubt you can invoke it that way - there is no global addRole() function defined. –  zerkms Jul 2 '13 at 2:40
 
it uses angular... if the alert shown, definitely it is invoked. the problem is only in the adding to the json, I assured you. –  Rudy Jul 2 '13 at 2:42
add comment

2 Answers

up vote 5 down vote accepted

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.

share|improve this answer
 
that's logical, I think this is the issue here –  CME64 Jul 2 '13 at 2:48
 
ok. I have tried your suggestion and I have noticed that actually the roleList is changed. However it does not reflected in the ng-repeat. the issue is more to angular binding - because it does not reflected in the UI, but still not sure what caused it. –  Rudy Jul 2 '13 at 2:48
 
I don't know enough about Angular to even start debugging that. But I did make this fiddle that might help later: jsfiddle.net/J7BYD. I changed .tab to .tabs because I don't know what plugin you're using. –  kalley Jul 2 '13 at 3:00
 
+1 I have solved the issue. I created 2 of ng-controller="RoleListCtrl", which cause the angular framework loses the hold of the scope. should just wrap the popup and the thing with the same controller. On the top of that, I have the issue that you pointed out. Thanks for your help! –  Rudy Jul 2 '13 at 3:42
add comment
up vote 0 down vote 
var currentList = $scope.roleList;
var newList = currentList.concat(newRoleArray);
$scope.roleList = newList;
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.