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

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -