AngularJS动态绑定ng-options的ng-model实例代码

AngularJS中的动态绑定ng-options与ng-model实例详解

当我们面对复杂的数据结构，如一个包含多个类别和选项的数组时，如何动态地在AngularJS中使用ng-options和ng-model进行绑定呢？下面，我们将通过一个实例来详细这个问题。

假设我们有一个名为“Classes”的数组，其中包含多个类别及其对应的选项。我们需要使用ng-repeat来遍历这个数组，并为每个类别生成一个下拉选择框。这个选择框的选项应该动态地绑定到ng-model上。那么，我们如何在Controller中处理这个问题呢？

让我们看一下HTML部分：

```html

```

在上述代码中，我们使用ng-repeat指令遍历classes数组，为每个类别生成一个下拉选择框。每个选择框的ng-model值被动态地绑定到SelectdCollection对象的属性上，属性的名称与类别的名称相对应。这样，我们就可以在Controller中通过$scope.SelectdCollection获取到所有选择的选项。

接下来，让我们看一下Javascript部分：

```javascript

function DemoController($scope){

$scope.classes = [

{

"Name": "温度 ",

"Options" : ["Cold" , "Hot", "Normal"]

},

{

"Name": "份量 ",

"Options" : ["Big" , "Middle" , "Small" ]

}

];

$scope.SelectdCollection = {}; // 用于存储所有选择的选项

$scope.submit = function() {

console.log($scope.SelectdCollection); // 打印所有选择的选项

};

}

```

在这个Controller中，我们定义了classes数组、SelectdCollection对象和submit函数。当用户在页面上选择某个选项并点击“送出”按钮时，submit函数会被触发，并在开发者工具的console中打印出所有选择的选项。这样，我们就可以在服务器端获取到用户的选择并进行相应的处理。

通过动态地绑定ng-model和ng-options，我们可以在AngularJS中轻松实现复杂的下拉选择框。希望这个例子能对大家的学习有所帮助，也希望大家能多多支持我们的网站——狼蚁SEO。