Я делаю приложение, в котором есть какое-то поле, и пользователь может добавлять новые строки с новыми (одинаковыми) полями. Мне нужно, чтобы пользователь добавил option
для select
. Я знаю, как сделать в 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 = '';
}
});
Прежде всего, вы должны написать функцию 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 (вам нужно установить другие параметры (API загруженные?) В selectOptions var на контроллере):
<select ng-model="selectItem" ng-options="selectOption in selectOptions">
</select>
Дополнительную информацию об этом можно найти в документации: https://docs.angularjs.org/api/ng/directive/ngOptions
ng-model дает двухстороннюю привязку. Все, что вам нужно сделать, это добавить элемент в модель, используя.push()
Вам не хватает области углового, поэтому вы не можете добавить в список.
Вы сделали это так, так как это javascript-метод, который вы не можете получить в области угловых нормально. здесь нет $ 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);
}