箱入りのionicとphonegapのCSS

Question

私は、ionicとIMの答えをn-g repeatを使って動的に作ります。 Ive beeは数時間試していますが、どちらもipadではうまくいきますが、iphoneや他の方法ではうれしいです。ここでは、それは私の携帯電話上でどのように見えるかです：私のiPadでここ

とを

やろうとしているすべてのイムは「気分オーバー」は、例えばその答えを持つオブジェクトを持っているし、この例では答えに対応するボックスを動的に作成します。[] [] [] [] [] [] [] [] [] [] []

私はng-repeatを使って何をしていますか私は私の例を持っています：

<form> 
<span ng-repeat="content in answerArr track by $index" class="single-input"><span style="margin-right:10px;"></span><!--this adds space --> 
<div class="testingg" style="width:50%;margin-right:auto;"> 
<div style="width:50%;margin-right:auto;margin-left:auto;"> 
<span class="single-input" ng-repeat="contentt in content track by $index"> 

<div class="row"style=""> 
      <span ng-if="$index < content.length"> 
       <div class="box single-number" style=""> 
        <input type="text" class="" focus maxlength="1"> 
       </div> 
      </span> 
      </div> 
</div> 
</span> 
</div> 
</span> 
</form> 

これを行うには、より良い方法がありますか、何か明白なものがありませんか？イムは...彼らは__使用して、私はボックスを使用しています以下

althoughtのようなものを単語が重なった場合、それは次の行に行く中心CSSの並べ替えを達成しようとしています。誰も助けることができますか？

Answer 1

まあ、それぞれの行に特定の長さを設定することができます。答えの長さを使ってthoの部分文字列を作成し、オブジェクトにプッシュします。行の長さが5で、答えが「気分を超えています。 3つの部分文字列 を作成し、オブジェクトにプッシュする必要があります。今度は というネストされたng-repeatを実装します。そのオブジェクトは部分文字列を含んでおり、その部分文字列を内部に持ちます。 希望するでしょう:)