jquery - style - ng switch angular 6
Angularjs-¿Cambia dinámicamente dom con directivas o widgets? (2)
Así es como lo haría. Tenga en cuenta que este es solo un punto de partida. Todavía hay una cuestión de vinculación a valores particulares en las entradas correspondientes. Espero que ayude.
Margen:
<html ng-app="App" ng-controller="MainCtrl">
<body>
<component index="0"></component>
<component index="1"></component>
Current type: {{type}}
<button ng-click="toggleType()">Toggle</button>
</body>
</html>
Directiva:
var ngApp = angular.module(''App'', []).directive(''component'', function() {
var link = function(scope, element, attrs) {
var render = function() {
var t = scope.layouts[scope.type][attrs.index];
if (t === ''textarea'') {
element.html(''<'' + t + '' /><br>'');
}
else {
element.html(''<input type="'' + t + ''"><br>'');
}
};
//key point here to watch for changes of the type property
scope.$watch(''type'', function(newValue, oldValue) {
render();
});
render();
};
return {
restrict : ''E'',
link : link
}
});
Controlador:
var MainCtrl = function MainCtrl($scope) {
$scope.type = ''Type1'';
$scope.types = [ ''Type1'', ''Type2'' ];
$scope.layouts = {
''Type1'' : [ ''textarea'', ''textarea'' ],
''Type2'' : [ ''number'', ''text'' ]
};
$scope.toggleType = function() {
if ($scope.type === ''Type1'') {
$scope.type = ''Type2'';
}
else {
$scope.type = ''Type1'';
}
};
};
mi objetivo es entender cómo usar angularJS correctamente. Quiero poder vincular una selección de variables para cambiar dinámicamente la estructura DOM utilizando angularJS. No creo entender bien la documentación que proporciona angular y no he encontrado ningún ejemplo aquí o de otro modo. Cualquier ayuda es apreciada.
La idea es que tengo este caso de uso donde primero empiezo con la selección del tipo y de ese tipo seleccionado, los elementos de tipo de entrada apropiados serán creados y luego grabados más tarde con el modelo ng (desde textareas hasta casillas de verificación, por ejemplo) , todo el tiempo controlado por el controlador angularjs para validación / restricciones. Estoy acostumbrado a la idea de tener elementos clonables en la página y destruir y crear nuevos con jQuery, pero he estado leyendo que los controladores no deberían tener esta lógica y deberían crearse con directivas / widgets. No veo ningún ejemplo de directivas o widgets manipulados de esta manera, así que no estoy seguro de cómo proceder. ¿Puedo usar directivas para manipular el DOM de esta manera, no solo una vez sino varias veces según un elemento observado?
Ejemplo de lo que me gustaría hacer.
$scope.types = [''Type1'',''Type2'']
// something along the lines of...
$scope.layouts = {''Type1'':[''textarea'',''textarea''], ''Type2'':[''numeric'',''datepicker'']}
Seleccione Tipo 1:
- Mostrar 2 áreas de texto
Seleccione tipo 2:
- Mostrar una entrada numérica
- Mostrar un selector de fecha
Gracias,
-JR.
La manera más fácil de evitarlo que puedo pensar es haciendo uso de ng-show y ng-hide.
http://jsfiddle.net/cfchase/Xn7PA/
<select ng-model="selected_type" ng-options="t for t in types">
</select>
<div ng-show="selected_type==''Type1''">
<input type="text" id="text1" ng-model="text1"/>
<input type="text" id="text2" ng-model="text2"/>
</div>
<div ng-show="selected_type==''Type2''">
<input type="number" id="numeric1" ng-model="numeric1"/>
<input type="date" id="date1" ng-model="date1"/>
</div>
Por supuesto, podrías limpiar esto sin poner ninguna lógica en el html, pero no quería nublar el problema con cosas extra en el controlador.
Para la validación, consulte la documentación de formularios . Es probable que use principalmente la validación integrada de AngularJS con algunas personalizadas que construya.
En cuanto a las directivas, los documentos en línea son densos, pero harán clic después de que haya experimentado por un tiempo. Para una introducción más amable, Jon Lindquist tiene un tutorial de Hello World en YouTube . Las directivas son definitivamente la forma de hacer la manipulación DOM en Angular.