下拉选择值仅在 angular js 中的添加按钮上使用一次

Question

当我点击添加按钮时，应该添加从下拉列表中选择的值，只有一次该值应该添加到结果字段。有些人曾经可以帮助我。下面是我试过的代码。

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];

}

查看：

<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>

Answer 1

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（您的控制器代码）：

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);
    }
  };
});

这是工作Plunker

编辑：您似乎只想增加一次价值。我已经编辑了我的答案和 plunker。

Answer 2

我创建了一个plunker

选中其他选项单选按钮时应启用文本框

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>

下拉选择值仅在 angular js 中的添加按钮上使用一次

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

angularjs

ng-repeat

selectedindex