我遇到了这个我无法找到解决方案的问题。 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 () {};
});
找到
答案 0 :(得分: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>