HTML

Question

在AngularJS应用程序中，只要ng-repeat生成如下内容：

<div>
  <button>Alice</button>
</div>
<div>
  <button>Bob</button>
</div>
<div>
  <button>Jennifer</button>
</div>

我希望所有按钮具有相同的宽度，这将是最宽的按钮的宽度，由它包含的标题的长度决定。这可以用纯AngularJS完成，而不是为此导入jQuery吗？

Answer 1

使所有按钮的宽度与标题最长的按钮相同，您不需要JavaScript，也不需要AngularJS，只需要CSS。

<强> HTML

<div class="container">
  <button type="button">Some button</button>
  <button type="button">Button here, too...</button>
  <button type="button">Yet another</button>
</div>

<!-- or using ng-repeat e.g. -->

<div class="container">
  <span ng-repeat="button in buttons">
    <button type="button" ng-bind="button"></button>
  </span>
</div>

<强> CSS

.container {
  position: absolute;
} 

.container button {
  display: block;            
  width: 100%;
  margin: 2px;
  text-align: center;
}

<强>截图

imgur

此处相关的plunker https://plnkr.co/edit/TNnWMD

Answer 2

我们需要使用一个指令来告诉我们# -DF0.CCM0.DramBaseAddress1 0x00004001内的所有元素的渲染都已完成。完成后，我们将检查每个按钮，以及我们将设置为所有按钮元素的最大宽度。

<强>标记

ng-repeat

<强>指令

<div ng-repeat="item in items" ng-repeat-finish>
  <button>{{item.name}}</button>
</div>

Answer 3

没有。 Angular不应该处理你的样式（css）或标记（html）。看一下像bootstrap och skeleton这样的响应式框架。你可以用任何javascript实现你想要的，但它只是应用正确的标签和css类。

Answer 4

是的，可以使用纯AngularJS来完成，而且非常简单。您可以定义一个表并重复每个单元格中的每个按钮。这样做 - 你将获得相同大小的所有按钮。

只需在html中创建一个ng-repeat和一个函数来定义javascript文件中的名称数组。那就是它！ JSbin example

HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>

    <meta name="description" content="[groupBy example]"/>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <div ng-controller="MainController"> 
          <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="name in names">
                    <td>
                      <input 
                             type="Button" 
                             value="{{name}}"
                             style="width:100%"></td>
                </tr>
            </tbody>
        </table>
      </div>
    </body>
    </html>

JS

angular.module('app',['angular.filter'])
  .controller('MainController', function($scope) { 
    $scope.names = ["Alice", "Bob", "Jennifer"];
 });

查看

enter image description here

Answer 5

您应该使用CSS而不是AngularJS绑定。你应该这样做：

<div style="display:inline-block;">
<div style="width: 100%">
  <button style="width: 100%">Alice</button>
</div>
<div style="width: 100%">
  <button style="width: 100%">Bob</button>
</div>
<div style="width: 100%">
  <button style="width: 100%">Jennifer</button>
</div>
</div>

当然，您应该将内联CSS拉出一些样式代码并使用类。

在AngularJS中使按钮具有相同的宽度

5 个答案:

HTML

JS

查看