Pregunta

Déjame describir lo que estoy tratando de hacer.Estoy creando una directiva ng realmente dinámica para crear una tabla basada en la matriz de datos y el objeto de configuración proporcionado.Lo que quiero saber es cómo asignar atributos dinámicamente en función de un objeto dentro del alcance.Digamos que tengo un objeto en algún lugar del alcance como:

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

y así sucesivamente y en algún lugar de mi plantilla está

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

y el resultado sería:

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

¿Es esto posible de alguna manera?

Lo que probé:Actualmente, logré crear una entrada para cada elemento en la matriz de entrada en cada fila y puedo asignar un tipo por type={{type}} pero los atributos html pueden diferir para cada tipo de elemento de entrada y creo que sería desagradable asignar atributos al elemento de forma "codificada" y quedarse atascado aquí.

¡Gracias de antemano por cualquier comentario!

¿Fue útil?

Solución

Aquí tienes un golpe:

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

Simplemente pase su objeto de pares de nombre-valor de atributo al dynamic-attributes atributo y la directiva lo agregará por usted:

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

En tu caso sería algo así:

<input dynamic-attributes="inputs.myInput">
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top