Question

根据这篇文章：Angularjs select elements from list and display in textarea

我想添加功能：

根据列表中选定的元素填写textarea。
添加用户插入的其他文字 - ＆gt;当用户决定他/她想要从列表中添加元素时（某些数据是用textarea编写的），从列表中选择元素并且＆＃34;追加＆＃34;现有的文字而不是＆＃34;清除＆＃34;所有textarea并从列表中插入值

你能这么善良并解释我该怎么做？

Answer 1

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

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是选择列表中的选择数据，before。
property mail是用于从所选元素中提取值的属性。
model包含textarea的内容，您可以在应用中根据需要重复使用。

以下是完整的相关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 = "";
});

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

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

1 个答案: