CODEWITHSUNDEEP
angularjsangularjs-ng-repeatselectedindex
Elakkiya Karunanithi
Elakkiya Karunanithi

Reputation: 21

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

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>

Upvotes: 2

Views: 1227

Answers (2)

Elakkiya Karunanithi
Elakkiya Karunanithi

Reputation: 21

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>

Upvotes: 0

Tomislav
Tomislav

Reputation: 3211

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.

Upvotes: 2

Related Questions