В AngularJS приложение всякий раз, когда ng-repeat производит что-то вроде этого:Сделать кнопкам ту же ширину в AngularJS

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

Я хотел бы, чтобы все кнопки имеют одинаковую ширину, которая была бы ширина, êнопêа является самым широким, определяемым длиной заголовка, который он содержит. Можно ли это сделать с помощью чистого AngularJS и без импорта jQuery только для этого?

2015-05-31 FallingSkies

Ну, как насчет CSS? –

не будет ли это CSS, и вообще ничего общего с Angularjs? – Claies

Мне не приходило в голову использовать CSS, так как я не очень хорошо разбираюсь в этом, но я буду изучать это, спасибо. – FallingSkies

делая все кнопки такой же ширины, как один с длинным заголовком, вам не нужен 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

Связанный плункер https://plnkr.co/edit/TNnWMD

источник

2015-05-31 21:23:22

Точный точный +1 от меня .. –

No. Угловое не должно обрабатывать ваш стиль (css) или разметку (html). Взгляните на любую отзывчивую структуру, такую как бутстрап ох скелета. Вы можете достичь того, что хотите с помощью любого javascript, но это будет просто для применения правильных тегов и классов css.

источник

2015-05-31 17:35:11

Конечно AngularJS может обрабатывать разметку! Почему еще мы будем иметь ng-стиль и ng-класс? Это очень удобно при правильном использовании. –

Вы должны использовать 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 в некоторых моделирование кода и использование классов.

источник

2015-05-31 17:37:57 Kosta

width '100%' получит '100%' от родителя .. это никогда не будет устанавливать максимальную ширину любой кнопки ... вы правильно поняли вопрос OP –

Мы должны использовать одну директиву, которая сообщит нам, что обработка всего элемента внутри ng-repeat завершена. По завершении мы проверим каждую кнопку, а максимальную ширину будем устанавливать на все элементы кнопки.

Markup

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

Директива

app.directive('ngRepeatFinish', function($timeout) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attr) { 
     var maxWidth = 0; 
     if (scope.$last === true) { 
     $timeout(function() { 
      var allButtons = $(element).find('button'); 
      //check the maximum width of element 
      angular.forEach(allButtons, function(ele, ind) { 
      //below code will find maxWidth 
      maxWidth = ele.innerWidth > maxWidth ? ele.innerWidth : maxWidth; 
      }); 
      allButtons.css('width', maxWidth) 
     }); 
     } 
    } 
    });

источник

2015-05-31 17:50:39

Это работает, конечно, но это похоже на то, что кто-то спрашивает вас, как есть суп с вилкой, и мы достаточно любезны, чтобы показать, как это делается, вместо того, чтобы вводить ложку. –

@MikkoViitala Я не понимаю, о чем вы говорите? не могли бы вы рассказать мне, что должно было добавить в мой ответ? –

Я имею в виду, что лучше решить эту проблему, используя CSS и макет, а не JavaScript и/или директиву AngularJS. –

Да, это может быть сделано с чистым AngularJS, и это очень просто. Вы можете определить таблицу и повторить каждую кнопку внутри каждой ячейки. В этом случае вы получите все кнопки одинакового размера.

Просто создайте ng-repeat в html и функцию, чтобы определить массив имен в файле 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

источник

2015-05-31 18:40:25

Другое решение - дождаться завершения ng-repeat и затем управлять DOM. Вы можете легко с этим справиться, используя директиву и посмотреть $ last свойство ng-repeat. Если для элемента $ last item установлено значение true, вы запускаете событие и изменяете dom. Дайте мне знать, если вам нужна демонстрация. –

Сделать кнопкам ту же ширину в AngularJS

ответ

HTML

JS

Посмотреть

Смежные вопросы