angularjs - angular - failing to bind element's ng-show inside ng-repeat -
there panel each contact. want show remove button on specific panel when user mouse on same panel.
... <div class="col-sm-3" ng-repeat="contact1 in contacts"> <div class="panel panel-success" ng-mouseenter="{{contact1.id}}=true" ng-mouseleave="{{contact1.id}}=false)"> <div class="panel-heading"> <a href="#" ng-show="{{contact1.id}}" ng-click="remove($index)">remove button</a> </div> ...
i cant reason why code doesnt work.
there 2 things in code can create problem. first of all, ng-show
/ ng-mouseneter
/ ng-mouseleave
need expression. don't need put {{ }}
.
but wasn't 1 problem. fact using id
manage show property of item. expression need boolean , can't erase id
boolean in ng-mouseneter
. so, have use other attribute in item, isshow
example. keep id safe , able manage view it.
so, give :
<div class="col-sm-3" ng-repeat="contact1 in contacts"> <div class="panel panel-success" ng-mouseenter="contact1.isshow = true" ng-mouseleave="contact1.isshow = false"> <div class="panel-heading"> <a href="#" ng-show="contact1.isshow" ng-click="remove($index)">remove button</a> </div> ....
Comments
Post a Comment