如何为ng-repeat指令中的多项选择添加动态选项（） _ng-repeat指令多项选择

给定一个包含一些options元素的HTML文档, 任务是使用angularJS中的ng-repeat动态添加多个选择的javascript对象数组。
方法：该任务是使用ng-repeat遍历数组完成的。我们称这个数组"楷模"。 DOM中存在的每个选择菜单都将根据其在数组中的特定索引进行建模。例如2nd选择菜单将模仿2nd模型的对象数组中的对象。要向DOM添加更多选择菜单, 我们只需要将一个空对象推入模型的数组即可, ng-repeat指令负责其余的复制。下面我们逐渐为ng-repeat指令中的多项选择添加动态选项。
示例1：在此示例中, 我们将添加多个选择并显示所选数据。

< !DOCTYPE html> < html ng-app = "gfg"> < head> < meta charset = "utf-8" /> < script data-require = "angular.js@1.5.x" src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver = "1.5.11"> < /script> < script> var app = angular.module('gfg', []); app.controller('MainCtrl', function($scope) { $scope.models = [{}]; $scope.countries = ['India', 'Japan', 'US']; $scope.states = { India: ['UP', 'MP', 'Bihar'], Japan: ['Tokyo', 'Yokohama'], US: ['California', 'Texas'], } $scope.addRow = function() { $scope.models.push({}); } $scope.getState = function(country) { return $scope.states[country]; } }); < /script> < /head> < body ng-controller = "MainCtrl"> < center> < h1 style = "color: green; "> lsbin < /h1> < table> < tr> < th> Country< /th> < th> State< /th> < th> Action< /th> < /tr> < tr ng-repeat = "model in models"> < td> < select ng-options = "country as country for country in countries" ng-model = "model.country" ng-change = 'getState(model.country)'> < /select> < /td> < td> < select ng-options = "state as state for state in getState(model.country)" ng-model = "model.state"> < /select> < /td> < td> < button ng-click = "addRow()"> Add Row< /button> < /td> < /tr> < /table> < h3 style = "color:green"> Selections< /h3> < p ng-repeat = "model in models"> {{model.country}} - {{model.state}} < /p> < /center> < /body> < /html>

输出如下：
所有数据已成功添加到对象数组。

文章图片
示例2：在此示例中, 我们预填充了模型数组。

< !DOCTYPE html> < html ng-app = "gfg"> < head> < meta charset = "utf-8" /> < script data-require = "angular.js@1.5.x" src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver = "1.5.11"> < /script> < script> var app = angular.module('gfg', []); //Prepopulate the models array here app.controller('MainCtrl', function($scope) { $scope.models = [{ country: 'India', state: 'UP' }]; $scope.countries = ['India', 'Japan', 'US']; $scope.states = { India: ['UP', 'MP', 'Bihar'], Japan: ['Tokyo', 'Yokohama'], US: ['California', 'Texas'], } $scope.addRow = function() { $scope.models.push({}); } $scope.getState = function(country) { return $scope.states[country]; } }); < /script> < /head> < body ng-controller = "MainCtrl"> < center> < h1 style = "color: green; "> lsbin < /h1> < table> < tr> < th> Country< /th> < th> State< /th> < th> Action< /th> < /tr> < tr ng-repeat = "model in models"> < td> < select ng-options = "country as country for country in countries" ng-model = "model.country" ng-change = 'getState(model.country)'> < /select> < /td> < td> < select ng-options = "state as state for state in getState(model.country)" ng-model = "model.state"> < /select> < /td> < td> < button ng-click = "addRow()"> Add Row< /button> < /td> < /tr> < /table> < h3 style = "color:green"> Selections< /h3> < p ng-repeat = "model in models"> {{model.country}} - {{model.state}} < /p> < /center> < /body> < /html>

输出如下：
【如何为ng-repeat指令中的多项选择添加动态选项（）】我们看到页面现在总是包含国家"India", 并在页面加载时预先填充国家" UP"。