0

Adding a combobox or deleting a combobox on clicking submit isn't working. I am calling a function in scope when submit is clicked.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text Box</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script>
        angular.module('controllerAsExample', []).controller('SettingsController1', function ($scope)
        {
            $scope.comboBox = []
            $scope.addDropDown = function ()
            {
                $scope.comboBox.push('');
            }
            $scope.deleteDropDown = function (index)
            {
                $scope.comboBox.splice(index, 1);
            }
        });
    </script>
</head>
<body ng-app="controllerAsExample">
    <div id="ctrl-as-exmpl" ng-controller="SettingsController1">
        <input type="text" ng-repeat="dropDown in comboBox track by $index" />
        <select ng-model="newValue" ng-options="n in n[]"></select>
        <input type="submit" ng-submit="addDropDown()" value="Add" />
        <input type="submit" ng-submit="deleteDropDown()" value="Delete" />
    </div>
</body>

Improve this question
2
  • 1
    This line <select ng-model="newValue" ng-options="n in n[]"></select> throws an error. What is it supposed to do? Commented Jun 14, 2015 at 12:33
  • Add an empty combo box Commented Jun 14, 2015 at 12:38

2 Answers 2

Reset to default
1

First thing you need to change ng-submit to ng-click, then you need to change your object comboBox the value of each combo will be inside the combo box element, that will provide you the proper binding inside ng-repeat like dropDown.value by doing this you will never gonna use track by $index because the newly created in created as object with new index.

Markup

  <div id="ctrl-as-exmpl" ng-controller="SettingsController1">

    <input type="text" ng-repeat="dropDown in comboBox track by $index" ng-model="dropDown.value" />
    <select ng-model="newValue">
      <option ng-repeat="n in comboBox track by $index">{{n.value}}</option>
    </select>
    <input type="submit" ng-click="addDropDown()" value="Add" />
    <input type="submit" ng-click="deleteDropDown()" value="Delete" />
  </div>

As I said here you need to switch to my approach which I suggest here in this answer.

Demo Plunkr

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

3 Comments

Yes, but comoboxes are added horizontally. I tried giving <br/> tag but its not working
@CodeSpark make style of your input to style="dislay:block" should work look at here plnkr.co/edit/6fyeczChDOS6KDPZBSrh?p=preview plunkr
Its working but the add button should be on left and drop down should on the right
0

You should change from ng-submit to ng-click.

Improve this answer

5 Comments

Its adding text box rather than combo box when I use ng-click
@CodeSpark that's quite expected, given that your repeated element is <input type="text" ng-repeat="dropDown in comboBox track by $index" />: you're displaying as many inputs as they are elements in $scope.comboBox.
<input type="text" ng-repeat="dropDown in comboBox track by $index" /> should be change to a select if you want a drop down list.
I changed it to <select ng-repeat="dropDown in comboBox track by $index" /> and its working but the combo boxes are added right next to each other. I want it to add in next line
@CodeSpark you won't learn HTML by asking questions here. Take an HTML 101 tutorial.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.