2013-11-15 7 views
6

私がしようとしていることを説明しましょう。 私は、データ配列と設定オブジェクトに基づいてテーブルを構築するための、本当に動的なngディレクティブを構築しています。私が知りたいのは、スコープ内のオブジェクトに基づいて属性を動的に割り当てる方法です。AngularJS:オブジェクトをHTML属性にマップする方法

$scope.inputs.myInput = { 
    type : "number", 
    size : 3, 
    min : 0, 
    ... 
} 

などとどこかに私のテンプレートで

<tr><td>other stuff</td><td><input {{assign the attributes somehow}} /></td></tr> 

で、結果は次のようになります:のは、私は次のようにどこかのスコープ内のオブジェクトを持っているとしましょう

<tr><td>other stuff</td><td><input type='number' size='3' min='0' ... /></td></tr> 

は何とかこれです可能?

私が試したこと:現在、すべての行の入力配列の各項目の入力を作成しましたが、type={{type}}で型を割り当てることができますが、html属性は入力要素のタイプごとに異なる場合があります要素を「ハードコードされた」方法に割り当てることは厄介で、ここではまってしまった。

フィードバックをいただきありがとうございます。

答えて

5

Here's a plunk for you

.directive('dynamicAttributes', function($parse){ 
    return function($scope, $element, $attrs) { 
    var attrs = $parse($attrs.dynamicAttributes)($scope); 
    for (var attrName in attrs) { 
     $attrs.$set(attrName, attrs[attrName]); 
    } 
    } 
}) 

だけdynamic-attributes属性に属性の名前と値のペアのあなたのオブジェクトを渡すと、ディレクティブはあなたのためにそれを追加します。お使いの場合には

dynamic-attributes="{style:'background: red;height:200px;', class: 'red'}" 

を、それがものになるだろう次のようにしてください:

+0

私はこれを今すぐ試してみましょう!ありがとうございました。 – kuncajs

+0

パーフェクト、まさに私が必要なもの – kuncajs

関連する問題