AngularJS編集モードcss

Question

次のサイト：http://www.jgdoherty.org/「編集」をクリックすると（行が挿入されるのに数秒かかる）、セルがパディングされます。私はこの効果を削除するか、少なくともパディングを減らしたい。私はそれが原因でブートストラップクラス（bootstrap.cssへのリンクがあるページ）を想定しているので、修正するためにbootstrap.cssをハックする必要がありますが、パディングを作成するコード行を見つけることができませんでした。次のようにページでテーブルを作成 HTMLは次のとおりです。すべてのヘルプは大幅に

Answer 1

感謝を。彼の答えは助けになりました。 これは動作します： はそう

<input class="width_60" /> 

クラスは以下のコードは

.width_60 
{ 
width: 60px; 
} 

を下回っても、私は必要ないもののように、「入力」のHTMLオブジェクトにクラスを追加します。表示されるように、コントローラメソッドに配置する必要があります。角括弧内の引数に "$ element"を追加し、また関数に "$ element.parent（）。find（ 'input'）.css（ 'width'、 '60px'）;"という行を追加しました。体。

Answer 2

をいただければ幸いです

 <table class="table table-bordered table-hover" style="width:800px"> 
    <tr> 
     <th>#</th> 
     <td>FirstName</td> 
     <th>LastName</th> 
     <th>Address</th> 
     <th>City</th> 
     <th>PostalCode</th> 
     <th>Country</th> 
     <th>Notes</th> 
    </tr><tr data-ng-repeat="hotel in hotels"> 
     <td><strong data-ng-hide="hotel.editMode">{{ hotel.FriendId }}</strong></td> 
     <td> 
      <p data-ng-hide="hotel.editMode">{{ hotel.FirstName }}</p> 
      <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.FirstName" /> 
     </td> 
     <td> 
      <p data-ng-hide="hotel.editMode">{{ hotel.LastName }}</p> 
      <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.LastName" /> 
     </td> 
     <td> 
      <p data-ng-hide="hotel.editMode">{{ hotel.Address }}</p> 
      <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.Address" /> 
     </td> 
     <td> 
      <p data-ng-hide="hotel.editMode">{{ hotel.City }}</p> 
      <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.City" /> 
     </td> 
     <td> 
      <p data-ng-hide="hotel.editMode">{{ hotel.PostalCode }}</p> 
      <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.PostalCode" /> 
     </td> 
     <td> 
      <p data-ng-hide="hotel.editMode">{{ hotel.Country }}</p> 
      <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.Country" /> 
     </td> 
     <td> 
      <p data-ng-hide="hotel.editMode">{{ hotel.Notes }}</p> 
      <input data-ng-show="hotel.editMode" type="text" data-ng-model="hotel.Notes" /> 
     </td> 
     <td> 
      <p data-ng-hide="hotel.editMode"><a data-ng-click="toggleEdit(hotel)" href="javascript:;">Edit</a> | <a data-ng-click="deletefriend(hotel)" href="javascript:;">Delete</a></p> 
      <p data-ng-show="hotel.editMode"><a data-ng-click="save(hotel)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(hotel)" href="javascript:;">Cancel</a></p> 
     </td> 
    </tr> 
</table> 

私は何がbootstrapによって追加されているとは思いません。編集すると、inputフィールドが表示されます。彼らはあなたの<p>よりheightとの方が大きいです。つまり、自動的に展開されます。また、<td>のパッドは8pxです。

Answer 3

あなたはこれを試すことができます。Goivanniへ

angular.element('p.ng-binding').each(function() { 
    self = angular.element(this) 
    self.parent().find('input').css('width', self.width()); 
});