angularjs change ng-repeat variable and call function

Question

I am trying to toggle a class when clicking on the Save button but also call a function. I am using coffeescript. The function gets called but the variable never gets set to false.

div(ng-class="{'someclass':setListFocus}, ng-repeat="item in items")

  a(ng-click="setListFocus=false;someFunction();")
    span(class="gs-desktop") Save
  // Delete user data.
  a(ng-click="setListFocus=true")
    span Edit

you don't have enough code here to reproduce the issue, but my first guess is that you are victim of [JavaScript Prototype Inheritance](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs), due to your use of a primitive instead of an object. (The "Always use a dot in bindings" rule). — Claies, Aug 09 '15 at 01:00
no, I am trying to change setListFocus inline to toggle the class then call someFunction(), thanks — user1572796, Aug 09 '15 at 02:32
I understand what your declaration does; my question was if somehow the function that you didn't list the body of in the question might be triggering a change to the variable as well, reversing what the ng-click is doing. — Claies, Aug 09 '15 at 03:23
I see, yeah I'm not really sure. I wrapped the button in another span(ng-click for the variable and that seems to fix it, not a great solution but works for now. thanks for the feedback though — user1572796, Aug 09 '15 at 04:50

score 0 · Answer 1 · answered Aug 09 '15 at 01:05

I assume that your small example is missing all kinds of data. I would recommend either using controllerAs, for example:

<div ng-controller="myController as vm">

and then changing your bindings to vm.setListFocus.

Or another option would be to change your controller code like so:

function myController($scope) {
    $scope.list = { focus: false };
}

And change your binding to list.focus instead. This will solve your scope inheritance problems.

J-Dizzle · Answer 2 · 2015-08-09T02:48:49.193

You could begin someFunction() with toggling the value of setListFocus

$scope.someFunction = function(){
     $scope.setListFocus = !$scope.setListFocus;
     // ... rest of someFunction()
}

And then the angular template would be just this:

a(ng-click="someFunction()")

Another thing you could do is set up a toggle ListFocus function, that can take an optional callback parameter. This means you can toggle the listfocus between true or false, and optionally execute another function. I'm not going to continue answering in coffeescript because I'm not that familiar, and not everyone is.

$scope.toggleListFocus = function(andThen = false){
    $scope.listFocus = !$scope.listFocus;
    if(andThen==false) andThen();
}
//usage..
//toggle $scope.listFocus
enter code here
a(ng-click="toggleListFocus()")
//toggle then someFunction()
a(ng-click="toggleListFocus(someFunction())")

angularjs change ng-repeat variable and call function

2 Answers2