Question

我有一个表单，您可以在其中添加x个字段。每个字段包含选项选择。我想在之前的一个或多个字段中选择此选项时筛选出已选择的选项。每个字段都有一个删除按钮，表单有1个添加按钮。

如何过滤掉动态字段？任何帮助，指导都是最受欢迎的。谢谢。：）

这就是我的HTML的样子：

<div data-ng-repeat="choice in choices">
          <select data-ng-model="choice.option"
                  data-ng-options="item as item.Value for item in options">
          </select>
          <button data-ng-click="removeChoice(choice)">Remove choice</button>
        <div>
           <button data-ng-show="choices.length <= 4" data-ng-click="addNewChoice()">Add Choice</button>
         </div>
</div>

我的控制员：

        $scope.options = [
            {
                "Key": "0",
                "Value": "Select an option"
            },
            {
                "Key": "Option1",
                "Value": "Option1"
            },
            {
                "Key": "Option2",
                "Value": "Option2"
            },
            {
                "Key": "Option3",
                "Value": "Option3"
            },
            {
                "Key": "Option4",
                "Value": "Option4"
            },
            {
                "Key": "Option5",
                "Value": "Option5"
            }
        ];


        $scope.choices = [{ id: '1' }];

            $scope.addNewChoice = function () {
                var newItemNo = $scope.choices.length + 1;
                    $scope.choices.push({ id: newItemNo, option: $scope.option, value: $scope.value });
            };

            $scope.removeChoice = function () {
                var index = $scope.choices.indexOf(choice);
                $scope.choices.splice(index, 1);
            };

Answer 1

确定我可以给出简单的推荐。

1：添加变量$ scope.selectedOptions = []; 这将包含所有选定元素中已选择的选项列表。

2：创建函数$ scope.AddSelectedOption（item）; 当我们从任何select元素更改选项时，这将添加所选对象，因为我们将用于所有选择ng-change =“AddSelectedOption（item）;”

3：添加checkIfSelected（item）;这将检查是否已选择给定的对象值..

将用户进入希望你明白它会做什么只是像这样检查

$ scope.checkIfSelected = function（item）{

$ scope.selectedFound = $ scope.selectedOptions.filter（function   （选项） {                       if（option.value == item.value）                       {                           返回日;                       }
                  }）;
                   if（$ scope.selectedFound.length == 0）{return false; } else {       返回true; }

}

如果在选项中找到项目，则返回true。如果没有...你可以邀请我再次帮助。

Answer 2

这是可能的。我正在解释这个要求的基本版本。请参阅此处的工作示例http://plnkr.co/edit/S9yZpjhY55lXsuifnUAc?p=preview

正在做的是维护另一个options，它是原始options的副本。复制options将使其不引用现有选项，因为对象在Javascript中通过引用传递。

主要逻辑在此函数中，它修改选择中的options：

$scope.optionSelected = function(choice) {
    $scope.availableOptions = $scope.availableOptions || angular.copy($scope.options);

    if (choice.option) {
        var index = -1;
        // See if available options has that key
        angular.forEach($scope.availableOptions, function(item, i) {
            if (item.Key === choice.option.Key) {
                index = i;
            }
        });

        if (index > -1) {
            // And then remove it
            $scope.availableOptions.splice(index, 1);
        }
    }
};

AngularJS过滤器已从动态字段中选择了选项

2 个答案: