将选定的列表元素附加到文本区域，添加自己的文本

Question

在此基础上 post : Angularjs select elements from list and display in textarea

我想添加功能：

根据从列表中选择的元素填充文本区域。
添加用户插入的附加文本 -> 当用户决定 he/she 想要从列表中添加元素（一些数据写在 textarea 中）时，select 列表中的元素和 "append" 到现有文本而不是 "clear" 所有文本区域并从列表中插入值

你能不能帮我解释一下我该怎么做？

Answer 1

这是一个有效的 jsfiddle 做你所要求的。每次单击列表元素时，它都会附加到文本区域。

main 函数是一个通用指令，您可以跨控制器重复使用它：

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）：

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

数据myModel是select列表中的select离子数据，如before。
属性 mail 是用于从 selected 元素中提取值的属性。
model 保存文本区域的内容，您可以在您的应用中随意重复使用。

这是完整的相关 HTML 代码：

<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>

这是控制器和应用程序部分：

var myApp = angular.module('myApp', []);

myApp.controller('Main', function($scope){
    $scope.data = [{mail:"a@foo"},{mail:"b@foo"},{mail:"c@foo"}];
    $scope.model = "";
});

确保你 define/initialise 每个指令的模型（例如 $scope.model = ""）如上，否则它将显示为初始未定义。

将选定的列表元素附加到文本区域，添加自己的文本

Append selected list elements into textarea, add own text

javascript

select

textarea

angularjs