angularjs 1.6.9 select如何绑定数据

在 AngularJS 1.6.9 中，你可以使用 `ng-options` 指令来绑定数据到 `select` 元素上。下面是一个简单的示例：

<select ng-model="selectedItem" ng-options="item.id as item.name for item in items">
  <option value="">-- 请选择 --</option>
</select>

在上面的示例中，`ng-model` 指令用于将选中的项绑定到 `$scope.selectedItem` 变量上，而 `ng-options` 指令则用于将 `$scope.items` 数组中的数据绑定到 `select` 元素上。

其中，`ng-options` 指令的语法如下：

ng-options="value as label for item in items"

其中：

- `value`：用于绑定到 `ng-model` 指令上的值。
- `label`：用于显示在 `select` 元素中的文本。
- `item`：用于迭代的数组或对象。
- `items`：要迭代的数组或对象。

在上面的示例中，我们将 `item.id` 绑定到 `ng-model` 指令上，将 `item.name` 显示在 `select` 元素中，并且使用 `items` 数组作为数据源来迭代。另外，我们还添加了一个默认选项，用于提示用户选择。

相关问题

angularjs 1.6.9 select ng-bind

在 AngularJS 1.6.9 中，您可以使用 `ng-options` 指令来设置下拉选项列表，然后使用 `ng-model` 指令将选定的值绑定到模型中。 如果您想在选项中显示另一个值，可以使用 `ng-bind` 指令。

以下是一个简单的示例：

HTML 代码：

<select ng-model="selectedItem" ng-options="item.id as item.name for item in items">
    <option value="">Select an item</option>
</select>
<p>You selected item {{selectedItem}} - {{selectedItemName}}</p>

AngularJS 控制器代码：

$scope.items = [
    {id: 1, name: 'Item 1'},
    {id: 2, name: 'Item 2'},
    {id: 3, name: 'Item 3'}
];
$scope.selectedItem = '';
$scope.selectedItemName = '';

$scope.$watch('selectedItem', function(newVal, oldVal) {
    if (newVal !== oldVal) {
        var selectedItem = $filter('filter')($scope.items, {id: $scope.selectedItem});
        $scope.selectedItemName = selectedItem[0].name;
    }
});

在这个例子中，`ng-options` 指令将选项列表设置为 `items` 数组中的每个项目的 `id` 属性和 `name` 属性的组合。 `ng-model` 指令将所选项目的 `id` 绑定到 `$scope.selectedItem` 变量中。 最后，`ng-bind` 指令将 `$scope.selectedItemName` 变量绑定到选中项目的 `name` 属性，以显示所选项的名称。

angularjs 1.6.9前端控件绑定属性

在AngularJS 1.6.9中，可以通过以下方式绑定前端控件的属性：

1. ng-model：用于双向绑定数据模型和表单控件，常用于input、select、textarea等表单控件。

例如：

<input type="text" ng-model="username">

2. ng-bind：用于单向绑定数据模型和HTML元素，常用于div、span等非表单控件。

例如：

<div ng-bind="username"></div>

3. ng-src：用于绑定图片的url地址。

例如：

<img ng-src="{{imageSrc}}">

4. ng-class：用于绑定样式类。

例如：

<div ng-class="{ 'active': isActive }">...</div>

5. ng-style：用于绑定内联样式。

例如：

<div ng-style="{ 'color': textColor, 'background-color': bgColor }">...</div>

以上是一些常见的属性绑定方式，还有其他的指令和属性可以使用，具体可以参考AngularJS官方文档。