AngularJS中的动态选择框和jQuery

Question

以下是我的PLNKR CODE

问题 -

我正在尝试创建一个动态标签选项和textarea like -

1. 如果用户选择“工作”，然后单击“+”图标，然后选择 将只包含 ["Cell", "Home", "Fax"]
2. 然后再次选择“主页”，从第二个选择并单击 “+”图标，下一个选择将只包含[“Cell”、“Fax”]等。

但我无法这样做，因为我的第一个数组正在递减，并且下部选择选项中没有数据。

让我知道我做错了什么以及我该怎么做（也欢迎提出建议）。

Answer 1

您的 $scope.temp 具有正确数量的对象。我认为问题在于单击加号按钮后构建新选择选项的方式。您正在尝试使用 jQuery 构造函数来构造元素。

您可能需要改用自定义指令。

Answer 2

将ng-click 移动到<a>，并将ng-model="target" 添加到文本区域：

<select ng-model="contact"
        ng-options="selOption.value as selOption.name for selOption in selOptions"
        ng-init="contact = selOptions[0].value"></select>
<textarea ng-model="target"></textarea>
<a href="#" ng-click="shiftArr()"><img src="..." id="plusbutton"></a>

在控制器中，初始化$scope.target，修改$scope.shiftArr，如下：

$scope.target = '';

$scope.shiftArr = function() {
    var arrVal = $scope.contact;
    var newArr = [];
    newArr = $scope.selOptions;
    for (var i = 0; i < newArr.length; i++) {
        if (newArr[i].value === arrVal) {
            $scope.target = $scope.target + newArr[i].name + '\n'; 
            var index = arrVal - 1 ;
            newArr.splice(index, 1);
            $scope.temp = newArr;
        }
    }
};