Question

我是Angularjs的新手。我在here尝试过一个例子。

文件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;
  };
});

我希望在this picture中将每个textarea像facebook聊天时，显示关闭按钮。但我的问题是当鼠标移到一个的textarea然后所有 X按钮时显示。

如何为每个textarea分配动态控制器或如何做facebook聊天？

感谢您的帮助

Answer 1

您可以使用CSS和AngularJS。我建议你使用简单的CSS。并按下按钮ng-click。

此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>

Answer 2

通常，最好为此功能创建一个指令，并封装点击“x”按钮的所有逻辑，但为了简单起见，您还可以利用ng-repeat创建的子范围，并执行以下内容：

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

ng-repeat="item in items"为每个item创建子范围，因此您可以在子范围上设置值。

这是您修改后的plunker

修改

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

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

2 个答案: