Add an Option to Select in Angular

Question

I'm doing an application in which there are some field and the user can adds new rows with new (same) fields. I need to let the user add an option to select. I know how to make in jQuery, but I'm not able to integrate with Angular. If you see the plnkr CODE

you can see that there are one select and the last one is "+". When the user click on it, the input from where to get the text for new option should appear. This is the code for the showing, it should change class but it doesn't work because the input type is always inline:

  $(".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);

});

This is the code for the new option:

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

Can somebody help me to change the class on " + " pressing, and add the filled input in a new option?

Thank you in advice!

Hey can you please explain what you want question is not clear — Mitul
– Mitul, Commented Oct 29, 2015 at 11:39

Mitul · Accepted Answer · 2015-10-29 11:58:57Z

1

here is the working demo i have updated your html and 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 = '';

  }
});

answered Oct 29, 2015 at 11:58

Mitul

3,4372 gold badges25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

panagulis72 Over a year ago

Thanks a lot, i've solved thank to your demo. Is there a way to hide and show the input text for the new option? Maybe with a modal window

ngLover · Accepted Answer · 2015-10-29 11:44:56Z

0

You are missing to get the scope of angular , that's why you are not able to append in the list ..

You have did like this - since it is a javascript method you can not get the scope of angular normally. here no $scope available

  function add() {

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

        }

try with taking angular scope.

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

    }

working pluckr

answered Oct 29, 2015 at 11:44

ngLover

4,6183 gold badges24 silver badges42 bronze badges

Comments

yeouuu · Accepted Answer · 2015-10-29 11:48:02Z

First of all you should write the add() function in your controller like this:

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

And in the html you need to use ng-click attribute:

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

To print options in angularJS you can use the ng-options attribute ( you need to set your other (API loaded?) options in selectOptions var on the controller):

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

You can find more info about this in the documenation: https://docs.angularjs.org/api/ng/directive/ngOptions

Kunal Chitkara · Accepted Answer · 2015-10-29 11:53:10Z

0

ng-model gives a two way binding. All you need to do is add an element in model using .push()

answered Oct 29, 2015 at 11:53

Kunal Chitkara

1

Collectives™ on Stack Overflow

Add an Option to Select in Angular

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related