Question

我试图将一组span元素（使用ng-repeat创建）推到x轴上的某个计算位置。

这是在一个指令中完成的，其中每个元素的位置是根据一些启发式计算的。

但是，这些元素不是居中的，而是左对齐的。当存在需要在上述位置下居中的文本（可变长度）时，这会产生问题。

直观地说，可以计算包含文本的元素的宽度，并从translateX位置偏移，但是html是在指令中编译的，并且更改后渲染会导致明显的闪烁。

在下面的代码中，你可以想象好像垂直|表示文本应居中的中点位置。

HTML：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>

<div ng-app="varApp" ng-controller="TodoCtrl"> 
  <div class="outter">
    <span class="inner" ng-repeat="i in items track by $index" ng-if="i.value != null" ng-style="i.style">
      {{i.value}}
    </span>
  </div>
  <div class="outter2">
    <span class="inner" ng-repeat="i in items track by $index" ng-style="i.style">|</span>
  </div>
</div>

CSS：

.outter {
  position: absolute;
  top: 40px;
  z-index: 1;
  width: 100%;
  margin-left: 16px !important;
}

.outter2 {
  position: absolute;
  top: 10px;
  z-index: 1;
  width: 100%;
  margin-left: 16px !important;
}

.inner {
  posiiton: absolute;
  cursor: default;
  z-index: 1
  color: #red;
}

JavaScript（片段）：

angular.module('varApp', [])
.controller('TodoCtrl', function($scope) {
    var items = $scope.items = [];

  for(var i = 2; i <= 10; i++) {
    var string = new Array(i).join('a');
    items.push({
        value: string,
      style: {
        // should be transform: translateX(calcValue(el))
        marginLeft: (i * 10) + "px"
      }
    })
  }
});

我已将这个例子复制到最低限度，你可以在这里找到它; http://jsfiddle.net/w3fs8efe/90/

更新

我试图切换到使用＆＃34;框＆＃34;将宽度设置为 next 元素起点的起始点的宽度，本质上是一个带有列的表，但现在的问题是，当宽度被分解为时，lat元素不会居中适合父元素。

换句话说，还是没有运气！

Answer 1

通过将文本内容放在宽度等于开始和结束位置之间的偏移量的跨度内来管理以获得我想要的内容。

使用Javascript：

angular.module('varApp', [])
.controller('TodoCtrl', function($scope) {
    var items = $scope.items = [];

  for(var i = 2; i <= 10; i++) {
    var string = new Array(i).join('a');
    items.push({
        value: string,
      style: {
        // should be transform: translateX(calcValue(el))
        marginLeft: (i * 100) + "px",
        minWidth: ((i+1) * 100) - (i * 100)
      }
    })
  }
});

请参阅小提琴：http://jsfiddle.net/w3fs8efe/91/

在translateX

1 个答案: