附加选择列表元素融入到textarea的，加上自己的文字 [英] Append selected list elements into textarea, add own text

问题描述

在这个帖子的基础上：<一href=\"http://stackoverflow.com/questions/30686804/angularjs-select-elements-from-list-and-display-in-textarea\">Angularjs选择textarea的从列表和显示单元

On the basis of this post : Angularjs select elements from list and display in textarea

我想补充的功能：

1. 从列表中选择元素的基础上填写的textarea。


2. 添加用户插入额外的文本 - >当用户决定他/她想要从列表列表中添加元素（有些数据被写入文本区域），选择元素和追加，以现有的文本，而不是清列表中的所有文本区域，并插入值

你这么善良，给我解释一下我应该怎么做呢？

Could you be so kind and explain me how should I do this ?

推荐答案

下面是一个工作的jsfiddle 做你问什么。每当你点击它被追加到textarea的名单元素。

Here's a working jsfiddle doing what you ask. Every time you click on a list element it is appended to the textarea.

主要功能是一个通用的指令，你可以在控制器之间重用：

The main function is a generic directive that you can reuse across 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];
                }
            });
        }
    };
});

要使用的指令，将在您的HTML以下（在适当的位置 - 见的jsfiddle）：

To use the directive, insert the following in your HTML (at the proper location - see jsfiddle):

<txt-area data="myModel" property="mail" placeholder="expected value" ng-model='model' ng-trim='false'></txt-area>

• 数据基于myModel 从选择列表中选择数据，的 之前。

  • data myModel is the selection data from the select list, as before.

    属性邮件是属性用于从所选元素提取值。

    property mail is the property to use for extracting values from selected element.

    模式持有textarea的内容，你可以重复使用，你在你的应用程序一样。

    model holds the textarea's content, which you can reuse as you like in your app.

    下面是完整的HTML相关code：

    Here's the complete relevant HTML code:

    <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's 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 = "";
    });
    

    请确保您定义/初始化每个指令的模式（如 $ scope.model =）如上，否则会出现像最初定义。

    Make sure that you define/initialise each directive's model (e.g. $scope.model = "") as above, otherwise it will appear as initially undefined.

    这篇关于附加选择列表元素融入到textarea的，加上自己的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！