dropdown selected value use only once on add button in angular js

Question

Selected value from the drop down should be added when I click on add button, only once the value should be added to the result field. Some once can help me on this. below is code which i tried.

function ContactController($scope) {
 $scope.contacts = ["Apple"];
 $scope.curItem = [{
     id: "1",
     items: "Apple"
 }, {
     id: "2",
     items: "Orange"
 }, {
     id: "3",
     items: "Banana"
 }, {
     id: "4",
     items: "Apricot"
 }, {
     id: "5",
     items: "Asparagus"
 }, ];
 $scope.selectedItem = $scope.curItem[0];

}

View :

<table class="range-table" width="100%">
    <tr>
        <td>
            <input type="hidden">
            <button class="btn btn-link" value= "Save">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </td>
        <td>
            <select required="" style="min-width:180px;"> </select>
        </td>
    </tr>
</table>

<table class="range-table" width="100%">
    <tr>
        <td ng-repeat="contact in contacts"> <td>{{ contact }}</td> 
    </tr>
</table>

<table class="range-table" width="100%"> <tr> <td><input type="hidden"> <button class="btn btn-link" value= "Save"><span class="glyphicon glyphicon-plus"></span> </td> <td><select required="" style="min-width:180px;"> </select></td> </tr> </table> <table class="range-table" width="100%"> <tr> <tr ng-repeat="contact in contacts"> <td>{{ contact }}</td> </tr> </table> — Elakkiya Karunanithi
– Elakkiya Karunanithi, Commented Aug 7, 2015 at 10:29
I've made this plunker: plnkr.co/edit/uPFwoHzWuiIgHGEhWgF6?p=preview Is it what you want to achieve? — Tomislav
– Tomislav, Commented Aug 7, 2015 at 10:36

Tomislav · Accepted Answer · 2015-08-07 10:54:53Z

HTML:

    <body ng-controller="MainCtrl">


        <table class="range-table" width="100%"> 
         <tr> 
            <td><input type="hidden"> <button class="btn btn-link" ng-click="save(selectedItem)">Save</button> </td> 
            <td><select ng-model="selectedItem" ng-options="i.items as i.items for i in curItem" ng-init="selectedItem=curItem[0].id"></select></td> </tr> 
</table> 
<table class="range-table" width="100%"> 
          <tr> 
          <tr ng-repeat="contact in contacts track by $index">
             <td>{{ contact }}</td> 
          </tr>
 </table>

</body>

Javascript (your controller code):

app.controller('MainCtrl', function($scope) {
  $scope.contacts = ["Apple"]; 

  $scope.curItem=[{id:"1",items:"Apple"}, {id:"2",items:"Orange"}, {id:"3",items:"Banana"}, {id:"4",items:"Apricot"}, {id:"5",items:"Asparagus"}]; 
  $scope.save=function(i){
    if ($scope.contacts.indexOf(i) <= -1){
     $scope.contacts.push(i);
    }
  };
});

Here is the working Plunker

Edit: It seems that you want to add value only once. I've edited my answer and plunker.

Magicprog.fr · Accepted Answer · 2015-08-14 08:34:45Z

0

I have created a plunker

Textbox should be enabled on click of other option radio button is checked

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.$watch('form.Program', function(mVal){
    if (angular.isUndefined($scope.form)) return; 

    if(mVal === 'other'){
       $scope.form.OtherProgram = $scope.tmVar;
    } else {
      if($scope.form.OtherProgram !== null){
        $scope.tmVar = $scope.form.OtherProgram;
         $scope.form.OtherProgram = null;
      }
     }
  });
});

HTML:

<body ng-controller="MainCtrl">
    <p>
        Program:
        <label><input type="radio" ng-model="form.Program" name="Program" value="option 1" required /> option 1</label>
        <label><input type="radio" ng-model="form.Program" name="Program" value="option 2" required /> option 2</label>
        <label><input type="radio" ng-model="form.Program" name="Program" value="other" required /> other</label>
        <input type="text" ng-model="form.OtherProgram" ng-disabled="form.Program != 'other'" name="Program_Other"  ng-required ="form.Program != 'other'"/>
    </p>
</body>

edited Aug 14, 2015 at 8:34

Magicprog.fr

4,1204 gold badges29 silver badges35 bronze badges

answered Aug 10, 2015 at 13:11

Elakkiya Karunanithi

219 bronze badges

1 Comment

Elakkiya Karunanithi Over a year ago

stackoverflow.com/questions/18405953/…

Collectives™ on Stack Overflow

dropdown selected value use only once on add button in angular js

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related