Hello every one i have a language multiple selection input. On select language i need to open textboxes of selected language with dynamic ng-model. this is my json and code.
[{"id":"1","lang":"English"},{"id":"2","lang":"Arabic"},{"id":"3","lang":"Français"}]
<select class="form-control" ng-model="language" multiple required >
<option value="" disabled="">Select Language</option>
<option ng-repeat="l in lang" value="{{l.id}}">{{l.lang}}</option>
</select>
<div class="form-group" ng-repeat="lng in language" >
<label class="col-md-2" style="padding-right: 0px;">Name {{lang[lng-1].lang}}</label>
<div class="col-md-10" >
<input type="text" ng-model="typename.lang[lng-1].id" required >
</div>
personally I would use ng-options instead of ng-repeat like this
Controller:
$scope.inputs = [];
$scope.languagues = [{"id":"1","lang":"English"},{"id":"2","lang":"German"},{"id":"3","lang":"Spanish"}];
$scope.showTextbox= function (option) {
$scope.inputs = [];
for(var i = 0; i < option.length; i++){
$scope.inputs.push({name: option[i], value: 'test'+i})
}
}
html:
<select class="form-control" ng-model="language" ng-options="option.lang as option.lang for option in languagues" ng-change="showTextbox(language)" multiple required ></select>
<div ng-repeat="item in inputs">
<br>
<label>{{item.name}}</label><br>
<input type="text" ng-model="item.value" required >
<p>
{{item.value}}
</p>
</div>
Here is a fiddle showing the changes Fiddle