Angularjs value not updating

Question

I know similar questions have been asked but they don't apply to my case. I have defined some variables in my controller and display their values in a panel. My controller related to the part is like this:

var vm = this;
vm.wellId = "id";
vm.wellSeq = "sequence";
vm.onWellSelected = onWellSelected;
...
function onWellSelected(wells) {
    ...
    vm.wellId = wells[0]["id"];
    vm.wellSeq = wells[0]["sequence"];
    ...
}

and my html component is like this:

<div plate id="plate-layout"
    on-well-selected="vm.onWellSelected(wells)">
</div>
<ul class="list-group" style="width: 400px; overflow: auto">
    <li class="list-group-item">{{vm.wellId}}</li>
    <li class="list-group-item">{{vm.wellSeq}}</li>
</ul>

I checked the source and set break points in the function onWellSelected: vm.wellId and vm.wellSeq are indeed changed to the correct values after the operation, but the new value cannot be displayed. The definition of plate involves quite a number of other js files so not easy to show here, but plate itself is a directive, with support from two services. What could be the reasons? Thanks!

depends on where and how onWellSelected() is called. Show full context — charlietfl
– charlietfl, Commented Feb 3, 2016 at 1:32

Community · Accepted Answer · 2017-05-23 12:25:09Z

7

Sorry I'm new to Angular so took me a while to find this:

$scope.$apply();

Put it after the modification part and then the value is updated on the page.

EDIT:

Just a follow-up: if use this: $scope.$apply() or $scope.$digest(), then I'll get this error: $digest already in progress; but if I remove it, the value won't get updated. So I refer to this post here: Prevent Error, and now it's working fine without the error message. Hope this can help those facing the same issue.

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Feb 3, 2016 at 3:17

richards

52710 silver badges28 bronze badges

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

2 Comments

Alexander Elgin Over a year ago

No, that's not required. $scope.$apply() is redundant. Moreover since 1.2 $scope is not required at all to update controller fields. Use controller as syntax instead. You defined the controller incorrectly. See the answer below with correct syntax.

richards Over a year ago

Sorry there are a lot of files involved so I cannot show everything here, but I'm quite sure my controller should be correct. I established the link between js and html in the controller js file, instead of using ng-app and ng-controller. Now using $apply indeed gives me the desired output.

Alexander Elgin · Accepted Answer · 2016-02-03 03:01:35Z

1

var app = angular.module('myApp', []);

app.controller("myCtrl", function () {
  var vm = this;
  vm.wellId = "id";
  vm.wellSeq = "sequence";

  vm.onWellSelected = function (wells) {
    vm.wellId = wells[0]["id"];
    vm.wellSeq = wells[0]["sequence"];
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl as vm">
    <span>{{vm.wellId}}</span>
    <span>{{vm.wellSeq}}</span>
    <button ng-click="vm.onWellSelected([{id: 'new id', sequence: 'new sequence'}])">Select Well</button>
  </div>
</div>

edited Feb 3, 2016 at 3:01

answered Feb 3, 2016 at 2:46

Alexander Elgin

6,9954 gold badges44 silver badges53 bronze badges

1 Comment

ggorlen Over a year ago

An explanation would be useful here.

Collectives™ on Stack Overflow

Angularjs value not updating

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related