AngularJS edit JSON array by reference

Question

I am giving AngularJS a bash and am trying a small test app where I have a list on the left and based on what is selected, update a form on the right to allow editing of parameters. This is the HTML

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="tstApp" ng-controller="tstCtrl">

<div>
    <select size="2" style="width: 100px"
        ng-model="selected"
        ng-options="i as i.name for i in items track by i.name"
    />
</div>

<div>
    <input type="text" name="descr" value="{{selected.descr}}"/><br/>
    <input type="text" name="ref" value="{{selected.ref}}"/><br/>
</div>

<script src="test.js"></script>

</body>
</html>

and this is the JavaScript

var tstapp = angular.module('tstApp', [])
tstapp.controller('tstCtrl', function($scope) {
    $scope.items = [
                {
                        "name" : "ITEM1",
                        "descr" : "This is item1",
                        "ref" : "Reference1"
                },
                {
                        "name" : "ITEM2",
                        "descr" : "This is item2",
                        "ref" : "Reference2"
                }
    ];
    $scope.selected = $scope.items[0];
});

The problem with this is that when you actually change the description in the edit field, it remains like that and don't reflect the value of the array item any-more. I think the reason is probably obvious in that 'selected' is a copy of the array item and not the item it self. I can't seem to figure out how to edit the array item directly though that is currently selected.

Anik Islam Abhi · Accepted Answer · 2015-12-03 08:22:13Z

3

You have to bind it as ng-model in order to get changes

Like this

 <input type="text" name="descr" ng-model="selected.descr"/>

JSFIDDLE

edited Dec 3, 2015 at 8:22

answered Dec 3, 2015 at 8:12

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Waslap Over a year ago

Thanks, I can see your suggestion works. I've changed the test on my host according to your suggestion and it does react differently but it does not remember my change to description i.e. changing selection in the list box just brings back the original value. When I try it in the fiddle it works though. I'm sure all is exactly as in the fiddle so I'm stumped.

Waslap Over a year ago

As a follow-up. I think my problem is due to a bug in 1.4.8. When I change to 1.2.1 as in the Fiddle, it works :-(

Collectives™ on Stack Overflow

AngularJS edit JSON array by reference

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related