AngularJs: come mappare l'oggetto agli attributi HTML

Question

Lasciami descrivere cosa sto cercando di fare. Sto costruendo una direttiva NG davvero dinamica per creare tabella in base all'array dati e all'oggetto configurato fornito.Quello che voglio sapere è come assegnare gli attributi in modo dinamico basato su un oggetto in ambito.Diciamo che ho un oggetto da qualche parte nell'ambito come:

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

.

E così via e da qualche parte nel mio modello è

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

.

e il risultato sarebbe:

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

.

è questo in qualche modo possibile?

Cosa ho provato: Attualmente, sono riuscito a creare un input per ogni elemento in Matrice di ingresso in ogni riga e posso assegnare un tipo da type={{type}} ma gli attributi HTML possono differire per ogni tipo di elemento di input e penso che sarebbe cattivamentePer assegnare attributi all'elemento "hard-coded" e siamo rimasti bloccati qui.

Grazie in anticipo per qualsiasi feedback!

Answer 1

Ecco un sorso per te :

.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]);
    }
  }
})

.

Basta passare il tuo oggetto di Attributo Nome-Value Pairs all'attributo dynamic-attributes e la Direttiva lo aggiungerà per te:

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

.

Nel tuo caso sarebbe qualcosa del genere:

<input dynamic-attributes="inputs.myInput">

.