Добавить опцию для выбора в Angular

Question

Я делаю приложение, в котором есть какое-то поле, и пользователь может добавлять новые строки с новыми (одинаковыми) полями. Мне нужно дать пользователю добавить option в select. Я знаю, как сделать в jQuery, но я не могу интегрироваться с Angular. Если вы видите plnkr CODE

вы можете увидеть, что есть один 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); 
} 

Может кто-нибудь помочь мне изменить класс на «+», нажав и добавьте заполненный вход в новый вариант?

Благодарим вас за консультацию!

Answer 1

вот рабочая демонстрация, я обновил ваш html и приложение.JS

DEMO

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 = ''; 

    } 
}); 

Answer 2

Вы не хватает, чтобы получить объем углового, поэтому вы не можете добавлять в список ..

Вы сделали, как это - так как это Java-метод, который вы не можете получить объем угловой нормально. здесь нет $ охвата доступен

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); 

    } 

working pluckr

Answer 3

Прежде всего, вы должны написать функцию 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, необходимо использовать атрибут нг-клик:

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

Для печати опций в angularJS вы можете использовать ng -options атрибут (вам нужно установить ваши другие (API загружен) варианты в вар на выберите Функции контроллера?):

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

Вы можете найти более подробную информацию об этом в documenation: https://docs.angularjs.org/api/ng/directive/ngOptions

Answer 4

ng- модель дает двухстороннюю привязку. Все, что вам нужно сделать, это добавить элемент в модель, используя .push()