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

Question

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.

dynamic select options from this lists of objects this part is not clear. — dfsq
– dfsq, Commented Sep 30, 2014 at 7:28
i edited my question already, what i want is to duplicate the first rendered select tags from that lists... so i will have, 2 select tags using the object lits, when the user click the button. — Anthony Pillos
– Anthony Pillos, Commented Sep 30, 2014 at 7:31

Jevgeni · Accepted Answer · 2014-09-30 07:47:35Z

2

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

edited Sep 30, 2014 at 7:47

answered Sep 30, 2014 at 7:27

Jevgeni

2,5741 gold badge18 silver badges18 bronze badges

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

6 Comments

Anthony Pillos Over a year ago

No, not like this.. its something like this: jsfiddle.net/rdy4e4xx/3 when a user click the button it will duplicate the select tags using angularjs

Jevgeni Over a year ago

What do you mean by "duplicate the select tags"? Add more "select" controls to the page?

Anthony Pillos Over a year ago

check this one: jsfiddle.net/rdy4e4xx/4 the select tag is duplicated.. whenever i click the add "duplicate select tags" button i want to create new select tag lists..

Jevgeni Over a year ago

And then, you probably want to collect values to some structure: jsfiddle.net/rdy4e4xx/6

Anthony Pillos Over a year ago

Whoa.. this one is good.. is it possible to distinguish every newly created select?.. example the first select create has a name of: selection1, then the next created to selection2.

|

Nhan Nguyen · Accepted Answer · 2014-09-30 07:43:12Z

0

I think you are looking for this

  <div ng-controller="ListsCtrl">
        {{ mySizes }}
        <select ng-model="mySizes">
            <option value="">- - Make Selection - -</option>
            <option ng-repeat="size in sizes" value="{{ size.name }}">{{ size.name}}</option>
        </select>

     <button ng-click="dupplicate(mySizes)">Duplicate Select Tags</button>
  </div>

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

answered Sep 30, 2014 at 7:43

Nhan Nguyen

4953 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related