combine binded item and expression in angular js

Question

In HTML:

<ul class="list-group">
   <li ng-repeat="item in simpleListVM.datasource track by $index" class="list-group-item">
      <simple-list-items listitem="item" listitemid="{{item.data.name + $index + 1}}"></simple-list-items>
   </li>
</ul>

In Directive:

scope: {
    listitem: '=',               
    listitemid:'&'                   
}

When I run the application it shows error.

Syntax Error: Token '{' invalid key at column 2 of the expression [{{item.data.name +$index + 1}}] starting at [{item.data.name +$index + 1}}].

Is that the line the error points to? but it has an array in the error, but not in the question? — Sravan
– Sravan, Commented Feb 15, 2017 at 4:56
please create a demo with the issue you are facing will help understand you problem easily. — Manish
– Manish, Commented Feb 15, 2017 at 4:57

Stephen J Barker · Accepted Answer · 2017-02-15 04:58:56Z

1

That is because the listitemid you provided is an interpolated expression and should be a function as defined by listitemid: '&'.

To me it seems you want to change listitemid: '&' to listitemid: '@'. This will bind to the result of the expression.

answered Feb 15, 2017 at 4:58

Stephen J Barker

1,01910 silver badges16 bronze badges

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

1 Comment

Stephen J Barker Over a year ago

No problem @user2323308. Glad to help

Nikhil Mohanan · Accepted Answer · 2017-02-15 05:09:17Z

Stephen J Barker is right, please check my example code,

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
</head>

<body ng-controller="MainCtrl">
  <ul class="list-group">
    <li ng-repeat="item in simpleListVM.datasource track by $index" class="list-group-item">
      <simple-list-items listitem="item" listitemid="{{item.name + $index + 1}}"></simple-list-items>
    </li>
  </ul>
</body>
<script>
  var app = angular.module('plunker', []);

  app.controller('MainCtrl', function($scope) {

    $scope.simpleListVM = {};
    $scope.simpleListVM.datasource = [{
      'name': 'test1'
    }, {
      'name': 'test2'
    }, {
      'name': 'test1'
    }];

  }).directive("simpleListItems", function() {
    var dir = {};
    dir.scope = {
      listitem: '=',
      listitemid: '@'
    };
    dir.link = function(s, e, a) {
      console.log("listitem", s.listitem);
      console.log("listitemid", s.listitemid);
    }
    return dir;
  });
</script>

</html>

Collectives™ on Stack Overflow

combine binded item and expression in angular js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related