使用多个下拉和ng-reapeat的动态ng模型

Question

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>

Answer 1

Try this :

 var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl',function($scope) { $scope.lang = [{ "id": "1", "lang": "English" }, { "id": "2", "lang": "Arabic" }, { "id": "3", "lang": "Français" }]; $scope.submitLang = function(selectedLang) { console.log(selectedLang); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <select class="form-control" ng-model="language" ng-options="option.lang for option in lang" multiple required ></select> <div ng-repeat="lng in language"> <label>{{lng.lang}}</label> <input type="text" ng-model="selectedLang" required ng-change="submitLang(selectedLang)"> </div> </div> 

Answer 2

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