AngularJS 编辑模式 css

Question

在以下站点上：http://www.jgdoherty.org/ 当单击“编辑”时（填充行需要几秒钟），单元格会被填充。我想消除这种影响或至少减少填充。我认为它是导致它的引导类（该页面有一个指向 bootstrap.css 的链接）所以我需要破解 bootstrap.css 来修复它，但我无法找到创建填充的代码行。 页面中创建表格的html如下：

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

任何帮助将不胜感激

Answer 1

我认为bootstrap 没有添加任何内容。当您进行编辑时，您的 input 字段就会出现。它们在height 和width 中比您的<p> 更大。这意味着它将自动扩展。 <td> 也有 8px 的填充。

Answer 2

你可以试试这个：

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

Answer 3

感谢戈瓦尼。他的回答有帮助。 这有效： 像这样向“输入”html对象添加一个类

<input class="width_60" /> 

类在下面

.width_60
{
 width: 60px; 
}

下面的代码也可以满足我的需要。如您所见，您必须将它放在控制器方法中。我将“$element”添加到括号中的参数以及“$element.parent().find('input').css('width', '60px' );" 到函数体。

 function hotelController($scope, Hotel, $element) { 
        $scope.loading = true;
        $scope.addMode = false;
        $scope.hotels = Hotel.query();
        $scope.loading = false;
        $scope.toggleEdit = function (hotel) {
            id = hotel.HotelId;
            $element.parent().find('input').css('width', '60px');   


        this.hotel.editMode = !this.hotel.editMode;
    };