添加要在“角度”中选择的选项

Add an Option to Select in Angular

本文关键字：选择 选项 角度 添加      更新时间：2023-09-26

我正在做一个应用程序，其中有一些字段，用户可以用新的（相同的）字段添加新行。我需要让用户向select添加一个option。我知道如何在jQuery中制作，但我无法与Angular集成。如果你看到plnkr代码

你可以看到有一个select，最后一个是"+"。当用户点击它时，应该会出现从哪里获取新选项文本的输入。这是显示的代码，它应该更改类，但它不起作用，因为输入类型总是内联的：

  $(".new").on("click", function () {
var state = $(this).data('state');
state = !state;
if (state) {
    $("new-option").addClass("hide");
} else {
    $("new-option").removeClass("show");
}
$(this).data('state', state);

})；

这是新选项的代码：

        <div class="new-option">
    <label> New Option </label>
    <input type="text" data-ng-model="food.newOption">
    <button onClick="add()">Add</button>
    <script language="JavaScript">
function add() {
var newOption = '<option value="lol">' + $scope.food.newOption + '</option>';
    $('.new').append(newOption);
}

有人能帮我在按下"+"键时更改类，并将填充的输入添加到新选项中吗？

谢谢你的建议！

这是我更新了你的html和app.js 的工作演示

演示

app = angular.module('Test', []);
app.controller('ProductController', function($scope,$http) {
  $scope.foods = [
    {
      "selectproduct": "",
      "Quantity1": "",
      "Quantity2": ""
    }
  ];
  $scope.options= ['0101003 - Min. Diet pesce 2 Scd' , '0101004 - Min. Maint pesce 4 Scm' , '0101115 - Min. Diet pesce 1.5 Scd']
  $scope.cloneItem = function () {
    var itemToClone = { "selectproduct": "", "Quantity1": "", "Quantity2": "" };
    $scope.foods.push(itemToClone);
  }
  $scope.removeItem = function (itemIndex) {
    $scope.foods.splice(itemIndex, 1);
  }
  $scope.add = function(food){
    $scope.options.push(food.newOption);
    food.newOption = '';
  }
});

您缺少获取angular的范围，这就是为什么您无法在列表中追加。。

您已经这样做了——由于这是一个javascript方法，您无法正常获得angular的范围。此处没有可用的$scope

  function add() {
        var newOption = "<option value='lol'>" + $scope.food.newOption + "     </option>";
            $('.new').append(newOption);
        }

尝试使用角度范围

function add() {
      var $scope = angular.element($(".form-group")).scope();
    var newOption = "<option value='lol'>" + $scope.food.newOption + "</option>";
        $('.new').append(newOption);
    }

工作拔毛器

首先，您应该在控制器中编写add（）函数，如下所示：

app.controller('ProductController', function($scope,$http) {
  $scope.foods = [
    {
      "selectproduct": "",
      "Quantity1": "",
      "Quantity2": ""
    }
  ];
  $scope.add = function(newOption) {
      scope.selectOptions.push(newOption);
  }
  $scope.cloneItem = function () {
    var itemToClone = { "selectproduct": "", "Quantity1": "", "Quantity2": "" };
    $scope.foods.push(itemToClone);
  }
  $scope.removeItem = function (itemIndex) {
    $scope.foods.splice(itemIndex, 1);
  }
});

在html中，您需要使用ng-click属性：

<button ng-lick="add(food.newOption)">Add</button>

要在angularJS中打印选项，您可以使用ng-options属性（您需要在控制器上的selectOptions var中设置其他（API已加载？）选项）：

<select ng-model="selectItem" ng-options="selectOption in selectOptions">
</select>

你可以在文档中找到更多关于这方面的信息：https://docs.angularjs.org/api/ng/directive/ngOptions

ng模型提供双向绑定。您所需要做的就是使用.push（）

在模型中添加一个元素
相关文章：