在ng-repeat中分配动态控制器

-2

我是Angularjs的新手。我试过here的一个例子。在ng-repeat中分配动态控制器

index.html文件：

<div ng-repeat="data in ctl.dataList"> 
    <div class="col-md-6"> 
    <textarea type="text" ng-mouseover="ctl.mouseOverFunc()" ng-mouseleave="ctl.mouseLeaveFunc()">{{data.value}}</textarea> 
    <button ng-show="ctl.showCloseBtn">X</button> 
    </div> 
</div>

文件app.js：

app.controller('FocusController', function() { 

    this.showCloseBtn = false; 

    this.dataList = [{ 
    value: "one" 
    }, { 
    value: "two" 
    }]; 

    this.mouseOverFunc = function() { 
    this.showCloseBtn = true; 
    }; 

    this.mouseLeaveFunc = function() { 
    this.showCloseBtn = false; 
    }; 
});

我想表明，当鼠标痊愈了每一个文本区域，如Facebook聊天在this picture关闭按钮。但我的问题是，当鼠标移过一个 textarea然后所有 X按钮被显示。

我该如何为每个textarea分配动态控制器，或者如何进行Facebook聊天？

感谢您的帮助

来源

2014-11-04 Trigges

您可以使用CSS以及AngularJS。我建议你使用简单的CSS。并在按钮上执行ng-click。

This Plunker Demo正在使用CSS并在其中添加了ng-click。请检查添加的样式和类。

样式

<style> 

    .field:hover .btn-close { 
     display:block; 
    } 

    .btn-close { 
     display:none; 
    } 

    </style>

HTML

<div ng-repeat="data in ctl.dataList"> 
     <div class="col-md-7 field"> 
     <textarea></textarea> 
     <button ng-click="doSomething()" class="btn-close">X</button> 
     </div> 
    </div>

这Plunker Demo与AngilarJS由New Dev在对方的回答说明。

<div ng-repeat="data in ctl.dataList"> 
<div ng-mouseover="data.showX = true" 
     ng-mouseleave="data.showX = false"> 
    <textarea></textarea> 
<button ng-click="doSomething()" ng-show="data.showX">X</button> 
</div>

来源

2014-11-04 07:47:03

通常情况下，这将是最好创建此功能的指令和封装点击“X”按钮，所有的逻辑，但为了简单起见，你也可以利用通过创建的子范围ng-repeat，并执行以下操作：

ng-repeat="item in items"每个item创建一个子范围，所以你可以对孩子作用域设置值。

这是你修改plunker

编辑：

正如评论所说，如果你有什么比显示或隐藏按钮更复杂，绝对CSS的方法是走的最简单方法。然后使用上面的例子来说明范围如何工作。

来源

2014-11-04 07:16:34

据我所知使用CSS，我们不能选择一个兄弟和不显示或隐藏mouseever。所以最好使用JQuery或AngularJS。 AngularJS会更好。 – 2014-11-04 07:22:52

@新开发我的例子很简单，但这个按钮可以在将来点击。你有这个案例的例子吗？ – Trigges 2014-11-04 07:25:37

@ShijuKBabu，是的，对于更复杂的事情，我同意。但在这种情况下，您使用CSS的方法绝对是最好的。 – 2014-11-04 07:25:47

在ng-repeat中分配动态控制器

回答

相关问题