After reading this post about selecting elements from a list in Angularjs and displaying them in a textarea
I am interested in implementing the following new features:
Could you please provide guidance on how to achieve this functionality?
If you're looking for a solution, check out this jsfiddle that does exactly what you need. Each time you click on an item in the list, it gets added to the textarea.
The key function here is a versatile directive that can be utilized in different controllers:
myApp.directive('txtArea', function() {
return {
restrict: 'AE',
replace: 'true',
scope: {data: '=', model: '=ngModel'},
template: "<textarea></textarea>",
link: function(scope, elem, attrs) {
scope.$watch('data', function(newVal, oldVal) {
if (newVal) {
scope.model += JSON.parse(newVal[0])[attrs.property];
}
});
}
};
});
To implement this directive, include the following code snippet in your HTML (ensure correct placement as shown in the jsfiddle):
<txt-area data="myModel" property="mail" placeholder="expected value" ng-model='model' ng-trim='false'></txt-area>
The myModel data represents the selected item from the dropdown list, as described here.
The mail property is the field used to extract values from the selected element.
The model holds the content of the textarea, which can be used in various ways in your application.
Below is the complete relevant HTML segment:
<div ng-app='myApp'>
<div ng-controller="Main">
<p>Original</p>
<select multiple="multiple" ng-model="myModel">
<option ng-repeat="d in data" value="{{d}}">{{d.mail}}</option>
</select>
<txt-area data="myModel" property="mail" placeholder="expected value" ng-model='model' ng-trim='false'></txt-area>
<div>{{model}}</div>
</div>
</div>
Here are the controller and app sections:
var myApp = angular.module('myApp', []);
myApp.controller('Main', function($scope){
$scope.data = [{mail:"a@foo"},{mail:"b@foo"},{mail:"c@foo"}];
$scope.model = "";
});
Just remember to define/initialize each directive's model (e.g. $scope.model = "") as seen above, or it may initially appear undefined.
In my Parent component Monsters, I am rendering the Monster component. for each monster in @state.monsters React.createElement Monster, key: monster.id, monster: monster, team: @state.team... Within the monster: div className: 'col-md-4' ...
I am currently using jqGrid in conjunction with CodeIgniter 2.1.0. I am facing a challenge regarding how to set a value for a specific column based on a particular event. For example, when entering quantity and rate values in the respective columns, I wan ...
Trying to understand the process of passing a prop from parent to child components. If I include the prop attribute with the #id within the child component tag, like Image cid="488484-49544894-584854", it functions correctly. However, I am interested in u ...
Experimented with getmdl-select using Vue2.0. Managed to get it to display correctly in the view, but the associated model is not updating. Here is the code snippet: <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select ...
For a specific project, I developed a module that is responsible for splitting files based on the '\r\n' delimiter and then sending each line to an event listener in app.js. Below is a snippet of the code from this module. var fs = req ...
My goal is to display a map using Mapbox only once the data is ready. The Vuex store code I am working with is as follows: /store/index.js import Vue from "vue"; import Vuex from "vuex"; import _ from "lodash"; import { bac ...
One of the functions I have is called showLoading(). This function is responsible for displaying a spinner by adding a specific class to the body: function showLoading(){ //console.log("show loading"); loading = true; $("body").addClass("loadi ...
I currently have an Ajax request that is awaiting a response from another process. function checkProcess() { var flag = 0; while (flag === 0) { $.ajax({ url: "cs/CheckForProcess", async: false, success: ...
I am looking to place the information panel at the bottom of my SVG map and have it adjust its width according to the width specified in the viewBox. This way, even if I resize the map, the info panel will automatically adjust to fill completely based on t ...
Is it possible to have HTML tag support in an HTML textarea within a form, similar to what is seen on Stack Overflow when asking a question? I would like to be able to capture the user's input in a textarea using PHP and print exactly what the user ty ...
My Vue-cli 3 project with Webpack has the following folder structure: /public /src /assets p1.jpg p2.jpg App.vue main.js I have read that in order for Webpack to recognize the /assets directory, require() should be used in JavaScript files ...
I am trying to add a menu button on top of my map that, when clicked, will display a window. I have created the map div and the overlayMenu button div, but unfortunately, the button is not showing up where I want it to. I would like the button to be locate ...
Does anyone have experience with localizing the date picker in material-table (Material UI)? The date picker is specifically used for filtering in this scenario. import React from 'react'; import MaterialTable from 'material-table'; fu ...
How can I display a preview of another page within a div container without actually making the text clickable? I want the preview to show when the mouse hovers over specific text, but I need the original text to stay on the main page. I've experiment ...
Is there a simple method using jQuery to highlight html-tags in red within a textarea? I'm clueless about how to achieve this since HTML tags aren't allowed in textarea, correct? :( Alternatively, can someone provide me with some helpful resour ...
I have a file containing image names like: sciFi.png, posed.png, birdA.png, dolphin.png, horse.png, shake.png, loft.png, basement.png, avenger.png, friend.png In my JavaScript document, I am trying to read this file and convert it into an array. Then, I w ...
In the following code snippet, I am attempting to create a simple search functionality. The goal is to count the visible 'li' elements in a list and display the total in a div called "totalClasses." Additionally, when the user searches for a spec ...
nameList includes [“Julia”, “Evan”, “Tomas”]; select ng-model=“names” ng-options=“x for x in nameList” In my controller, I make a service api call to GetNameByID/{id}” and based on the id, I need to set the default value of the drop ...
Desired Layout: | A | | B | | C | ^ ^ Adjustment Behavior: | A | | B | | C | Current Issue: | A | C | I attempted to enhance the functionality by modifying the provided JavaScript cod ...
I've been attempting to include a new property within createMuiTheme, but Typescript is not allowing me to do so. I followed the instructions provided here: https://next.material-ui.com/guides/typescript/#customization-of-theme I created a .ts file ...