Anthony Pillos Anthony Pillos - 2 months ago 10
AngularJS Question

How to create select option using directives on button click in Angularjs

I want to know how can i duplicate a select tag when i already render it using this lists..

var lists = [{name: "blue"},{name: "green"},{name: "red"},{name: "yellow"}]


and there is a add button to duplicate this select tags.

I created fiddle for this:
http://jsfiddle.net/rdy4e4xx/

I am thinking to used directives for this but i dont know where to start. Thanks guys.

Answer

I think you are looking for something like this (Updated):

HTML:

  <div ng-controller="ListsCtrl">
        {{ mySizes }}
        <select ng-model="selectTag.value"  ng-repeat="selectTag in selectTags">
            <option value="">- - Make Selection - -</option>
            <option ng-repeat="size in sizes" value="{{ size.name }}">{{ size.name}}</option>
        </select>
      <button type="button" ng-click="duplicateSelectTag()">Duplicate Select Tags</button>
      Selected values:
      <ul ng-repeat="selectTag in selectTags">
          <li>{{selectTag.value}}</li>
      </ul>
    </div>

JS:

var app = angular.module("app",[]);
app.controller('ListsCtrl',function($scope){
   $scope.sizes = [{name: "blue"},{name: "green"},{name: "red"},{name: "yellow"}]; 
    $scope.selectTags=[{
        value:null
    }];
    $scope.duplicateSelectTag = function() {

        $scope.selectTags.push({});
    }
});

Demo

Comments