AngularJS ng-repeat主体不替代md-button ng-click属性中的$ index

Question

I have the following template defined:

 <div ng-app="WebApp" ng-controller="PortfolioCtrl" ng-cloak layout="row" layout-align="center center" style="margin-top: 10px"> <md-content layout="row" layout-wrap style="width: 580px"> <div flex-xs flex-gt-xs="50" layout="row" ng-repeat="property in portfolio track by property.uuid"> <md-card md-theme="default" md-theme-watch="" style="width: 280px"> <md-card-title> <md-card-title-text> <span class="md-headline">{{property.yield}}%</span> <span class="md-subhead">{{property.address[0]}}</span> <span ng-if="property.address.length > 1" class="md-subhead">{{property.address[1]}}</span> <span ng-if="property.address.length > 2" class="md-subhead">{{property.address[2]}}</span> </md-card-title-text> <md-card-title-media> <!-- <div ng-if="property.photos.length > 0" class="md-media-sm card-media"> <img src="{{property.photos[0]}}" style="width: 75px; height: 85px" /> </div> --> </md-card-title-media> </md-card-title> <div style="display: none">{{$index}}</div> <div id="property_$index" style="display: none">{{property.uuid}}</div> <md-card-actions layout="row" layout-align="end center"> <md-button class="md-primary" ng-click="viewProperty( $index )">VIEW</md-button> <md-button class="md-primary" ng-click="uploadPhoto( $index )">UPLOAD PHOTOS</md-button> </md-card-actions> </md-card> </div> </md-content> </div> 

Looking at the below browser developer output, the $index specifications substitute correctly in the tag:

 <div style="display: none">{{$index}}</div> 

But within the ng-click attributes in the buttons and in this DIV id:

 <div id="property_$index" style="display: none">{{property.uuid}}</div> 

, they do not substitute. If I surround these $index specifications with {{ and }} I get an angular syntax error:

Tracking by $index doesn't work either. What is the problem, please?

Answer 1

I was using {{}} inappropriately. In ng-click() you don't use them, but in other locations, such as tag attributes, they need to be used.

Correct use:

<md-card md-theme="default" md-theme-watch="" flex-direction="column" ng-click="viewProperty( $index )" style="width: 158px">

And:

<div id="property_{{$index}}" style="display: none">{{property.uuid}}</div>