1

ng-repeat リストでは、リスト内の各項目に (JQ UI ラッピング ラジオ ボタンを使用して) ON/OFF ボタンを配置するのに苦労しています。

ラジオ ボタンを使用する場合、JQ UI ボタン​​セットには「input」タグと「label」タグの両方が必要であり、ラベルの「for」も入力の「id」と一致する必要があるようです。

次のように、{{$index}} を使用して一意にすることができます。

<label for='algoOn{{$index}}'>ON</label>
<input type='radio' [... blah blah ..] id='algoOn{{$index}}'>

問題は、DOM の準備ができたら $().buttonset() を呼び出すことです。さまざまなこと (dom.ready、リンク関数など) を試しましたが、遅延 [ $('.buttonme').buttonset() ] の後に呼び出して、ページ上のすべてのボタンをトリガーする必要がありました。ハッキー。

ただし、オン/オフ ボタンをディレクティブでラップしたいと思います。一意の ID が必要な場合でも、同じ問題があります。(一意の ID を持っていない場合、ディレクティブのリンク関数の呼び出しが成功するたびにボタンが大きくなります)

しかし... テンプレートで {{$index}} を使用すると、不思議な構文エラーが発生します。

Syntax error, unrecognized expression: [for=on{{$index}}] <onoffbtn prop="win.runstate" class="ng-isolate-scope ng-scope">

(コードには 'for=on{{$index}}' が含まれていませんが!)

ディレクティブは推奨されるアプローチですが、これを回避する方法がわかりません。

次に、ディレクティブでは、最初のクリック後にすべてのラジオ ボタンが同期されますが、ページが最初に読み込まれると、ディレクティブのボタンは両方とも空白になります。すぐにはモデルに設定されません。リンク機能でそれを行うことを考えました（例：要素->入力を見つける->値を設定）が、角度はすべての「名前」と「ID」を書き直しました。

両方の問題を示すプランカーはこちら: http://plnkr.co/edit/DTy8dGsRDVVDnWZBYlqQ

ありがとう！

4

1 に答える 1

1

あなたが言ったように、これはディレクティブから実行可能です。あなたのhtmlを使用buttonsetして、ラッピングdivに追加しました：

<div id='A{{$index}}' buttonset>
  <label for='algoOn{{$index}}'>ON</label>
  <input class="buttonme" type='radio' name='onoff{{$index}}' ng-model='win.runstate' ng-name='onoff' value='running' id='algoOn{{$index}}'>
  <label for='algoOff{{$index}}'>OFF</label>
  <input class="buttonme" type='radio' name='onoff{{$index}}' ng-model='win.runstate' ng-name='onoff' value='stopped' id='algoOff{{$index}}'>
</div>

buttonsetディレクティブは次のようになります

angular.module('button', [])
.directive('buttonset', function() {
    return function(scope, elm, attrs) {

      $(function(){
                 $(elm).buttonset();
            });      

    };
  });

これがプランカーです。これ以上ハックする必要はありません:)

更新: 取得しているエラーはdwbuttonset、コードが角度によってコンパイルされる前にディレクティブが実行されているという事実に関係しています。したがって、これが完了するまで待つ必要があります。すべてがロードされるまでメソッドをキューに入れるために、$timeout値 0 (この質問を参照)を使用できます。

例：

.directive('dwbuttonset', function($timeout){
  return function(scope, elm, attrs) {
      $timeout(function(){
          $(elm).buttonset();
      });        
}})
于 2013-01-17T19:00:08.547 に答える