CODEWITHSUNDEEP
javascriptangularjs
batman
batman

Reputation: 3685

Angular expression is not getting evaluated at run time. Why?

I'm new to angular and I have the following problem.

I have an html code like this:

<ul class="board-list gutter js-board-list clearfix">

   <li class="" ng-repeat="board in boardsUserOwns.success.boards">
        <a class="js-open-board highlight-icon    unknown" ng-click="getBoardDetails('{{board[0]}}')" href="" style="  background-color: #0E74AF; ">
        <span class="thumbnail" style=" ; background-color: #0E74AF; "></span>
        <span class="fade"></span>
        <span class="board-list-item-name" title="Geneva">{{board[0]}}</span>
        </a>
   </li>
<ul>

The line:

<a class="js-open-board highlight-icon    unknown" ng-click="getBoardDetails('{{board[0]}}')" href="" style="  background-color: #0E74AF; ">

has an angular js expression {{board[0]}}.

When this page is loaded in the browser, I can see the above html like this in the console:

<a class="js-open-board highlight-icon    unknown" ng-click="getBoardDetails('userwithbelongsto1')" href="" style="  background-color: #0E74AF; ">

which works as expected.

The problem I find is, when I click on the a tag; In the controller I get the not evaluated angular code:

$scope.getBoardDetails = function(boardName)
{
   console.log("The board name is " + boardName)
}

the console prints:

 The board name is {{board[0]}}

I'm confused now, where I'm making mistake.

Thanks in advance.

Upvotes: 0

Views: 177

Answers (2)

Hanu
Hanu

Reputation: 119

I have to display individual boards onclick on of grid element in figure . I am getting borad_id from database , how to proceed next . figure url :- https://i.sstatic.net/x0Sn2.png

app.config(['$stateProvider', function($stateProvider) {

  $stateProvider
  .state('board.boardDescription', {
      url: '/:bid',
      templateUrl:'js/main/templates/board.html'
    })
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul class="board-list gutter js-board-list clearfix" >
                    <li ng-repeat="board in boardName">
                     <a ui-sref="board.boardDescription({bid:board._id})" class="js-open-board highlight-icon" style="background-color: #0066A1;">
                       <span class="details">
                          <span class="board-list-item-name">{{board.name}}</span>
                        </span>
                      </a>
                    </li>
                  </ul>

![sample toodlist app figure ]

Upvotes: 0

neouser99
neouser99

Reputation: 1827

You don't need the curly braces. Try getBoardDetails(board[0])

The reason you are seeing {{board[0]}} printed in the console, is because that string is what is sent to the function, as the boardName argument. As you have it, getBoardDetails('{{board[0]}}') is saying, calling this function with the string {{board[0]}}. But when the html is parsed, it is properly replacing that expression.

Upvotes: 1

Related Questions