Tengo poca experiencia con la directiva angular y tengo un escenario en el que no puedo decidir si debo usar JQuery o la directiva angular 1.
Tengo una lista de objetos como:
[ { "id":"sdf34fsf345gdfg", "name":"samson", "phone":"9876543210", "email":"abc@gmail.com" }, { "id":"sdf34fsf3432fg45gdfg", "name":"xyd", "phone":"9876543210", "email":"xyz@gmail.com" } ]esta lista tengo que renderizar como
---Name |______email |______mobile | ---Name |______email |______mobileDespués de representar esta lista, solo debo permitir que el usuario seleccione correo electrónico o dispositivo móvil y, si se selecciona cualquiera de cada uno, el objeto en particular debe marcarse como seleccionado con su campo seleccionado.
¿Alguien puede explicarme el enfoque adecuado para hacerlo o cualquier módulo angular que lo haga de acuerdo con el requisito? También los datos seleccionados deben devolverse de la siguiente manera:
{ "9876543210":{ //if mobile number was selected "name":"samson" }, "syz@gmail.com":{//if email was selected "name":"xyz" } }Gracias de antemano. Avíseme si esta pregunta se puede mejorar o ilustrar de mejor manera.
¡Iría por un componente Angular puro! Es bastante avanzado para resolver.
Primero, crearía un "Componente de lista de miembros", simplemente adivinando de su lista de objetos. Aproximadamente crearía un componente como el componente a continuación. Me gusta implementar OnInit y OnDestroy. No conozco su configuración, pero es posible que pueda refactorizar más lógica en la directiva. Me gusta recopilar mis suscripciones en OnInit y darme de baja en OnDestory.
import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core'; import { Subscription } from 'rxjs/Rx'; @Component({ selector:'memberlist', templateUrl:'memberlist.html', styleUrls: ['memberlist.scss'] }) export class MemberListDirective implements OnInit, OnDestroy { @Intput() members: Array<MemberModel>; @Output() clicked = new EventEmitter(); constructor() { } ngOnInit() { } ngOnDestroy() { } memberClicked(type: string, member: MemberModel) { this.clicked.emit({ type: type, member: member }); } }En la plantilla (memberlist.html), configuraría un evento de clic y delegaría el evento a los suscriptores.
<div *ngFor="let member of members"> <div (click)="memberClicked('email',member)">{{member.lastname}}</div> <div (click)="memberClicked('mobile',member)">{{member.firstname}}</div> </div>La directiva se puede usar así:
<memberlist [members]="members" (clicked)="memberlistClicked($event)"></memberlist>Luego, en el componente donde se usa la directiva de lista de miembros, es simple obtener el evento $:
memberlistClicked(event) { console.log(event); }No lo he probado, pero así es más o menos cómo lo haces. Puede leer más sobre la directiva aquí: Directivas de Angular.io Me di cuenta de que la pregunta era sobre AngularJS, así que aquí hay una pista sobre cómo resolverla en AngularJS. Sin embargo, todavía amo a TS.
Aquí una idea sobre cómo crear una directiva, que puede comunicarse con un controlador:
app.directive('memberlist', () => { return { require: '^^someController', restrict: 'E', scope: { members: '=members', }, templateUrl: '/templates/memberlist.html', link: function (scope, someController) { scope.memberClicked = (type, member) => { someController.currentMember = { type: type, member: member }; } } }; });La instrucción require se usa para que AngularJS sepa que requiere 'someController'. Directiva en AngularJS
Otra forma, a veces uso (d) en AngularJS, es transmitir un evento y en un controlador crear un detector de eventos. Aquí hay una buena explicación de cómo usar eventos de transmisión de transmisión en AngularJS