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>

如何使用angularjs中的下拉动态动态添加多个输入框

1 个答案: