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

Question

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

0

Я делаю приложение, в котором есть какое-то поле, и пользователь может добавлять новые строки с новыми (одинаковыми) полями. Мне нужно, чтобы пользователь добавил 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);
}

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

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

panagulis72 29 окт. 2015, в 12:51

Источник

0

Эй, не могли бы вы объяснить, что вы хотите, вопрос не ясен
Mitul 29 окт. 2015, в 11:39

Теги:

javascript

jquery

angularjs

css3

4 ответа

0

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

yeouuu 29 окт. 2015, в 10:42

0

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

Kunal Chitkara 29 окт. 2015, в 10:08

0

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

Вы сделали это так, так как это 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);

    }

рабочий планк

ngLover 29 окт. 2015, в 09:55

Ещё вопросы

Эй, не могли бы вы объяснить, что вы хотите, вопрос не ясен

Mitul · Accepted Answer · 2015-10-29T09-03-00.000Z

вот рабочая демонстрация, я обновил ваши html и app.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 = '';

  }
});

Большое спасибо, я решил благодаря вашей демонстрации. Есть ли способ скрыть и показать введенный текст для новой опции? Может быть с модальным окном