Estoy usando Tagify con una directiva AngularJS personalizada que construí, la entrada mixta de Tagify devuelve los objetos JSON de las etiquetas y el texto seleccionados en una sola cadena, por ejemplo:
var tagify = new Tagify(myElement, { mode: 'mix', pattern: /@/, whitelist: [{ value: "User Name", code: '$name' }, { value: "Phone Number", code: '$phone' }], enforceWhitelist: true, dropdown: { maxItems: 20, classname: "tags-look", enabled: 0, closeOnSelect: true } }); tagify.on('change', () => console.log(tagify.DOM.input.value))La entrada del usuario sería:
Hola
User Name ×, el SMS ha sido enviado a su teléfonoPhone Number ×.
Este ejemplo simple devuelve:
Hola
[[{ value: "User Name", code: '$name' }]], el SMS ha sido enviado a su teléfono[[{ value: "Phone Number", code: '$phone' }]]. (y el JSON devuelto se escapa)
Lo que haré más tarde es reemplazar las etiquetas que el usuario seleccionó (escribiendo el carácter @ y seleccionándolas del menú desplegable) con mis propias variables dinámicas.
Pude obtener un buen resultado con tagify.DOM.input.textContent ya que arrojó el siguiente resultado:
Hola nombre de usuario, el SMS ha sido enviado a su número de teléfono.
Sin embargo, dado que la whitelist es traducible y puede estar en otros idiomas que no puedo find and replace fácilmente más adelante, lo que necesito es el atributo de code de la lista blanca de JSON y no el value . El resultado esperado que no pude encontrar una manera de alcanzar todavía es:
Hello $name, the SMS has been sent to your phone $phone.
Gracias.
Puede crear su función de transformación personalizada, para transformarla de la manera que desee, puede hacer algo como esto.
function transformer(value) { return value.replace(/\[\[(.*?)\]\]/g, (arr => { let json = JSON.parse(arr); return json[0].map(e => e.code).join(', '); })) }Y luego puede llamarlo al cambiar (o más bien en/o antes de enviar), así:
tagify.on('change', (e) => transformer(e.detail.value));