如何添加多個輸入框動態下拉在angularjs

Question

我有這個問題，我找不到解決方案。 1）我有一個下拉列表，其中的數據是從json文件中提取的 2）當用戶選擇一個項目時，我想動態地添加一個沒有按鈕的輸入框。

得到了一個jQuery代碼，但想要做它的角度的方式，但讀ng-Change是不是相同的jQuery .change？

任何人都可以幫助或指出我如何做到這一點的正確方向。

HTML

<div class="main-content__right" ng-controller="QuestionController"> 
     <div ng-repeat="element in questionList"> 
     <fieldset> 
      <div id="add-more" class="well"> 
      <div class="field"> 
       <div style="width:100%;" class="dropdown"> 
       <select name="{{options.name}}" id="select" data-ng-model="formData" 
data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'" 
ng-change="onCategoryChange(formData)"> 
        <option value="" data-id="null" disabled="" selected="">Select an item...</option> 
       </select> 
       </div> 
      </div> 


      {{formData}} 
     </div> 
     </fieldset> 
     </div> 

app.js

var app = angular.module("cab", []); 
    app.controller('QuestionController', function($scope) { 
    var $scope.formData = {}; 

    $scope.questionList = [{ 
     "sectionTitle": "Travel", 
     "subTitle": "How much do you spend on these items for your car?", 
     "inputType": "select", 
     "inputElement": [{ 
      "label": "Public transport", 
      "name": "travelOutgoing", 
      "helpInfo": "include train journeys", 
      "type": "select" 
     }, { 
      "label": "Taxis", 
      "name": "travelOutgoing", 
      "type": "select" 
     }, { 
      "label": "Bicycle", 
      "name": "travelOutgoing", 
      "helpInfo": "general running costs such as repair or rental", 
      "type": "select" 
     }, { 
      "label": "Car rental", 
      "name": "travelOutgoing", 
      "helpInfo": "include fuel, parking charges and tolls", 
      "type": "select" 
     } 

     ] 
    }]; 

    $scope.onCategoryChange = function() {}; 

    }); 

可以http://plnkr.co/edit/PPDYKjztPF528yli9FbN?p=preview

Answer 1

你的控制器功能需要每個選擇添加到陣列上範圍中找到：

控制器

app.controller('QuestionController', function($scope) { 
    $scope.formData = []; 
    $scope.selectedValue = {}; 

    $scope.questionList = [{ 
    "sectionTitle": "Travel", 
    "subTitle": "How much do you spend on these items for your car?", 
    "inputType": "select", 
    "inputElement": [{ 
    "label": "Public transport", 
    "name": "travelOutgoing", 
    "helpInfo": "include train journeys", 
    "type": "select" 
    }, { 
    "label": "Taxis", 
    "name": "travelOutgoing", 
    "type": "select" 
    }, { 
    "label": "Bicycle", 
    "name": "travelOutgoing", 
    "helpInfo": "general running costs such as repair or rental", 
    "type": "select" 
    }, { 
    "label": "Car rental", 
    "name": "travelOutgoing", 
    "helpInfo": "include fuel, parking charges and tolls", 
    "type": "select" 
    }] 
    }]; 

    $scope.onCategoryChange = function(selectedItem) { 
    $scope.formData.push(selectedItem) 
    }; 

}); 

然後，您可以使用ng-repeat渲染formData中的所有項目。

HTML

<fieldset> 
    <div id="add-more" class="well"> 
     <div class="field"> 
     <div style="width:100%;" class="dropdown"> 
      <select name="{{options.name}}" id="select" data-ng-model="selectedValue" data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'" ng-change="onCategoryChange(selectedValue)"> 
      <option value="" data-id="null" disabled="" selected="">Select an item...</option> 
      </select> 
     </div> 
     </div> 
     <div ng-repeat="item in formData track by $index"> 
     <input ng-model="item.label" /> 
     </div> 
    </div> 
    </fieldset>