0

I have a requirements, in which I have to show a combo-box (select). The options in it aren't fixed, I need to give a link to add more options, on whose click a text box must be shown within the select element, user will enter a value and it will be added in select's options. Please tell me how this can be achieved using Angular. jQuery provides a way to do that, but if i use that I am not able to bind the elements with Angular.

Regards

Nitin

Nitin Tomer
  • 19
  • 1
  • 6

2 Answers2

0

I'd suggest that you take a look at the docs dedicated to the select control in AngularJS. In a nutshell, you can use the ngRepeat to generate the options for you. If you need to get them from a backend, you can use resolve in your routing options and a service to grab them for you.

The example by AngularJs's website:

HTML

<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" ng-model="data.repeatSelect">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>repeatSelect = {{data.repeatSelect}}</tt><br/>
</div>

APP.JS

angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
  singleSelect: null,
  availableOptions: [
    {id: '1', name: 'Option A'},
    {id: '2', name: 'Option B'},
    {id: '3', name: 'Option C'}
  ],
};

}]);

You can also use ng-options, which is more recommended.

In regards to the textbox element, associate the two elements with ng-model.

Example:

Edd
  • 1,948
  • 4
  • 21
  • 29
0

Javascript file:

function ctrl($scope){
  $scope.rows = ['Paul','John','Lucie'];

  $scope.addRow = function(){
    $scope.rows.push($scope.addName);
    $scope.addName = "";
  };

}

HTML page:

<body ng-controller="ctrl">
  <select>
    <option ng-repeat="row in rows" value="{{ row }}">{{ row }}</option>
  </select>
  <span class="input-append">
    <input id="add" type="text" placeholder="Another one ?" ng-model="addName" />
    <input type="submit" class="btn btn-primary" ng-click="addRow()" value="+ add" />
    </span>
</body>

See: http://codepen.io/anon/pen/JdqqXj

Skarllot
  • 745
  • 6
  • 16
  • Thanks. Actually I want to have the text box to add new values within the select itself. How can that be done? – Nitin Tomer Aug 19 '15 at 07:10
  • You can use `datalist` tag, but it is HTML5 (http://caniuse.com/#feat=datalist). See: http://codepen.io/skarllot/pen/eNaavo – Skarllot Aug 19 '15 at 07:24
  • Thanks. It might work. But I couldn't find a way to delete items from datalist, and autofill from database. Is it possible to do so? – Nitin Tomer Aug 21 '15 at 04:59
  • @NitinTomer if datalist is binded to `rows` variable, just change it. Any change in this variable will reflect on datalist. To fill from database you need to fetch using `$http` and store response to binded variable. – Skarllot Aug 21 '15 at 15:49
  • Maybe I was not able to explain my self. My requirement is this - 1. Datalist will have some options, which will be picked from a database and added to it - I had done this. 2. User must be able to type something in the text box and add it to datalist options - done. 3. User must be able to delete any datalist option - maybe by clicking on a X icon. 4. While user is typing in the text box, I must be able to call a $http API and show autofill options from it. – Nitin Tomer Aug 21 '15 at 16:19
  • @NitinTomer 3. Just create another button and bind a function to it. In that function check whether current text is in datalist and do desired procedures. 4- You can use `ng-change` (https://docs.angularjs.org/api/ng/directive/ngChange) – Skarllot Aug 21 '15 at 18:43