使用多个下拉列表和 ng-repeat 的动态 ng-model答案

【问题标题】：dynamic ng-model using multiple dropdown and ng-reapeat使用多个下拉列表和 ng-repeat 的动态 ng-model
【发布时间】：2017-02-08 19:34:16
【问题描述】：

大家好，我有一个语言多选输入。在选择语言时，我需要使用动态 ng-model 打开所选语言的文本框。这是我的 json 和代码。

[{"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>

【问题讨论】：

是的，Rohit 已经检查过了。就像我一样认为我被实施了，但它对我不起作用，所以这就是为什么我做了很长的路要走。但是是的，您的逻辑是正确的。欣赏你的逻辑
感谢 Pankaj 的赞赏。您能否将该答案标记为正确，以便对其他人也有用。

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

试试这个：

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>

【讨论】：

【解决方案2】：

我个人会像这样使用 ng-options 而不是 ng-repeat

控制器：

$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>

这是一个显示更改的小提琴Fiddle

【讨论】：

感谢您的回答，但我对 option 或 ng-option 都没有问题。
那我不明白问题是什么不工作？
我有一个问题，当我选择 2 个选项时，会出现 2 个文本框，但我无法使用 ng-model 在该文本框中获取或设置值。
所以当你选择英文时，文本框应该会出现一个值？
不会出现空白文本框。我将填写值 int 并且我需要控制器中的值。