CODEWITHSUNDEEP
javascriptjsonangularjs
Mark
Mark

Reputation: 3197

expression syntax within ng-click

I have 2 variables wkidx and dyidx

I am trying to create multiple collapseable elements on the same page using the angular ui bootstrap directive and I have the following element

<a 
    href=""
    class=""
    ng-click="isCollapsed{{wkidx}}{{dyidx}}  = !isCollapsed{{wkidx}}{{dyidx}}">
    Blah
</a>

now this outputs what I want it to to the dom (ie it appends the variable values to iscollapsed) but I get a syntax error like so

Syntax Error
error in component $parse
Syntax Error: Token 'wkidx' is at column {2} of the expression [{3}] starting at [{4}].

I tried reading the page that the error page links to but it didn't really make things clearer for me. I have tried numerous variations and they either dont give an error but dont append the values or they append the values but throw a syntax error

thankyou for the help here is were I am at but I am getting errors for probably obvious reasons

html

<div
    ng-repeat="session in day.sessions"
    ng-init="ssnidx = $index">

    <a
    href=""
    class=""
    ng-click="setCollapsed(!isCollapsed(wkidx, dyidx), wkidx, dyidx)">
    </a>

    <div
        collapse="I DONT KNOW WHAT SHOULD GO HERE">
            <p>hello from the collapsed div</p>
    </div>
</div>

app.js

$scope.setCollapsed = function(value, wkidx, dyidx) {

    };

$scope.isCollapsed = function(wkidx, dyidx) {
   if (isCollapsed + wkidx + dyidx) {
       return true;
    } else {
      return false;
     }
  };

Upvotes: 0

Views: 121

Answers (1)

user2445933
user2445933

Reputation:

This is not a valid expression for ng-click. You'd better to create to methods in your $scope:

setCollapsed(value, wkidx, dyidx) and isCollapsed(wkidx, dyidx)

function MyController($scope) {
   $scope.setCollapsed = function(value, wkidx, dyidx) {
       //...
   };
   $scope.isCollapsed = function(wkidx, dyidx) {
       //...
   };
}

<a 
    href=""
    class=""
    ng-click="setCollapsed(!isCollapsed(wkidx, dyidx), wkidx, dyidx)>
    Blah
</a>

Assuming, that wkidx and dyidx are atached to $scope

Answering to your updated question:

<div
    ng-repeat="session in day.sessions"
    ng-init="ssnidx = $index">

    <a
    href=""
    class=""
    ng-click="setCollapsed(!isCollapsed(wkidx, dyidx), wkidx, dyidx)">
    </a>

    <div
        ng-show="isCollaspsed(wkidx, dyidx)">
            <p>hello from the collapsed div</p>
    </div>
</div>

Upvotes: 3

Related Questions