AngularJS中带有jQuery的动态选择框

Dynamic select box in AngularJS with jQuery

本文关键字：动态 选择 jQuery AngularJS      更新时间：2023-09-26

下面是我的PLNKR代码

问题-

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

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

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

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

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

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

将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;
        }
    }
};
相关文章：